Question

所以我想要一个功能来切换图像下的一些文本。这是切换脚本：

$(document).ready(function(){
    $('.mariage').click(function(event){
        event.stopPropagation();
         $(".result_mariage").slideToggle("fast");
    });
    $(".result_mariage").on("click", function (event) {
        event.stopPropagation();
    });
});

$(document).on("click", function () {
    $(".result_mariage").hide();
});

该脚本按预期工作，除了当用户单击另一个链接进行另一个信息切换时，该切换堆栈而不是隐藏最后一个链接。如果我单击除其他切换以外的其他任何位置，信息将隐藏并且一切正常。

（这是我单击以触发“错误”的位置的图像） In blue are the other link who toggle stuff

JS Fiddle例子：

https://jsfiddle.net/karg007/z6y54uro/

抱歉，如果我的英语不太好，那不是我的主要语言。

希望这些解释很清楚，即使我对此表示怀疑也可以帮助您：/ Plz会随时询问更多信息，以便我为您提供您需要帮助的我。

因此，简而言之，当我单击新的开关时，如何隐藏我以前的开关？

Answer 1

编辑答案

因此，您在OP中遇到的最大问题是，您没有试图理解代码。许多新程序员（不幸的是，有很多一直在编码的人）的一个大问题是他们就是我所说的复制编码器。复制关于stackoverflow的教程和答案可能使您可以创建网站，完成一些咨询工作，甚至支持您的整个职业生涯，但这与实际知道如何编程并不相同。

在SO上进行教程和提问非常好（事实上，这是我从中学到的90％的知识），但是您必须这样做，目的是从发现的内容中学习而不仅仅是完成您的工作。我对您的建议是真正重读我的原始答案（我在下面未做任何改动），并且了解如何将我显示的内容用于完成您想要的。 话虽如此，我已经完成了开始的工作，所以让我们继续解决问题：

我已将您的JSFIDDLE复制到Github代码段中，以便您和将来的用户在答案中看到结果。我立即注意到的第一件事是我的代码从原始答案复制到您现有的JS中。这样做很好，并且您已将“文本”正确更改为“ _result”，但是您错过了几件事：

我的代码获取clicked元素的ID，并使用该ID查找应隐藏的内容的ID。当您正确地更改了查找代码以使其与文本上的ID匹配时，您没有在要单击的图像上添加任何ID，因此我的代码无法执行任何操作。
您也没有删除最初用于实现此功能的4个函数，因此它看起来像我的代码在做某事并且工作不正确，而实际上我的代码在无所事事并且您的代码仍在做以前做了什么（尽管我绝对知道您之前在谈论什么错误）。
关于我上面的复制编码器问题，请注意您和我如何以不同的方式处理该问题以及您可以从中学到什么。
- 您想通过查找每个项目的类将侦听器功能附加到每个项目（这完全不相关，但是您使用的类不正确，并且“ mariage”等...更适合作为ID，您仍然可以像类），我选择将侦听器附加到单个类的所有元素上，然后按ID查找它们。
- 您的解决方案要求您为添加的每个项目编写新的JS代码，并且冒着拼写错误或每次对这些函数进行编码时忘记更改某些内容的风险。
- 我的解决方案使您可以根据需要向HTML添加任意数量的元素，而无需更改JS。只要您的图片具有ID，并且文本的ID等于“图片ID” +“ _ result”，该功能就会自动发生。

我试图尽可能少地修改您的代码，只需要删除这4个功能并在图像上添加ID（“ mariage”和“ amour”）即可使您的小提琴发挥作用。

我从拨弄中删除了四个功能：

  // My toggle code for mariage_result ->text #1
  $(document).ready(function() {
    $('.mariage').click(function(event) {
      event.stopPropagation();
      $("#mariage_result").slideToggle("fast");
    });
    $("#mariage_result").on("click", function(event) {
      event.stopPropagation();
    });
  });

  $(document).on("click", function() {
    $("#result_mariage").hide();
  });

  // My toggle code for amour_result ->text #2
  $(document).ready(function() {
    $('.amour').click(function(event) {
      event.stopPropagation();
      $("#amour_result").slideToggle("fast");
    });
    $("#amour_result").on("click", function(event) {
      event.stopPropagation();
    });
  });

  $(document).on("click", function() {
    $("#amour_result").hide();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最终代码：

// Test code to untoggle the previous element toggled
let lastClicked = null;

$(".hover_selection").click(function() {
  if (lastClicked) {
    lastClicked.hide();
  }

  let me = $("#" + this.id + "_result");
  me.show();
  lastClicked = me;
});

// slick slider option
$(document).ready(function() {
  $('.slider_index').slick({
    infinite: true,
    arrows: true,
    centerMode: true,
    slidesToShow: 1,
    variableWidth: true
  });
});

.tarif {
  width: 750px;
  text-align: left;
  margin: auto;
  margin-bottom: 30px;
  margin-top: 50px;
}

.result {
  display: none;
}

#mariage_result,
#amour_result,
#certificat_cadeau_result,
#maternite_result,
#portrait_result,
#commercial_result {
  width: 780px;
  height: auto;
  margin: auto;
}


/* -----------CSS SLIDER BELOW THIS POINT-----*/


/* Arrows */

.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  bottom: 10px;
  display: block;
  width: 150px;
  height: 50px;
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev:before,
.slick-next:before {
  font-size: 20px;
  line-height: 1;
  opacity: .75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: 25%;
  z-index: 9999;
}

[dir='rtl'] .slick-prev {
  right: 25px;
  left: auto;
}

.slick-prev:before {
  content: url('https://i.ibb.co/m9zR5YD/avant.png');
}

[dir='rtl'] .slick-prev:before {
  content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}

.slick-next {
  right: 25%;
  z-index: 9999;
}

[dir='rtl'] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: url('https://i.ibb.co/xGrj9kQ/apres.png');
}

[dir='rtl'] .slick-next:before {
  content: url('https://i.ibb.co/m9zR5YD/avant.png');
}

.slider_index {
  width: 100%;
  margin: auto;
}

.slider_index img {
  width: 100px;
  margin: auto;
  padding: 0px 20px 0px 20px;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}


/* Dots */

.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -40px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-family: 'slick';
  font-size: 30px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: .75;
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="titre_de_page">
  <p id="ancre">- Choisissez votre projet-photo -<br/>

  </p>
</div>

<div class="slider_index">

  <div>
    <img class="hover_selection mariage" id="mariage" src="https://via.placeholder.com/300" />
    <div class="caption_text">Mariage</div>
  </div>
  <div>
    <img class="hover_selection amour" id="amour" src="https://via.placeholder.com/300" />
    <div class="caption_text">Amour</div>
  </div>
  <div>
    <img class="hover_selection maternite" src="https://via.placeholder.com/300" />
    <div class="caption_text">Bedon + Bébé</div>
  </div>
  <div>
    <img class="hover_selection portrait" src="https://via.placeholder.com/300" />
    <div class="caption_text">Portrait</div>
  </div>
  <div>
    <img class="hover_selection commercial" src="https://via.placeholder.com/300" />
    <div class="caption_text">Commercial / Éditorial</div>
  </div>
  <div>
    <img class="hover_selection certificat_cadeau" src="https://via.placeholder.com/300" />
    <div class="caption_text">Certificat-cadeau</div>
  </div>
</div>
<br/>


<div class="result" id="mariage_result">

  <p class="all_texte tarif">
    My text to toggle number 1
    <br/><br/>

  </p>

</div>

<div class="result" id="amour_result">

  <p class="all_texte tarif">

    Toggle text number 2

  </p>

</div>

原始答案

据我所知，您只需要一个变量即可跟踪先前单击的项目。至于我在下面的演示中所做的事情，我认为它已经足够接近您想要做的事情了，因为我们没有可以使用的示例。我想您可能与我的示例有很大不同的唯一部分是如何查找me，因为我不知道DOM的确切结构或确切的命名方案是什么。

let lastClicked = null;

$(".clickable").click(function() {
  if (lastClicked) {
    lastClicked.hide();
  }
  
  let me = $("#" + this.id + "text");
  me.show();
  lastClicked = me;
});

#root {
  width: 300px;
  height: 300px;
  background-color: black;
}

.text {
  display: none;
}

#one {
  width: 50px;
  height: 50px;
  background-color: red;
}

#two {
  width: 50px;
  height: 50px;
  background-color: green;
}

#three {
  width: 50px;
  height: 50px;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="root">
  <div class="clickable" id="one">
    <p class="text" id="onetext"> 1 </p> 
  </div>
  <div class="clickable" id="two">
    <p class="text" id="twotext"> 2 </p>
  </div>
  <div class="clickable" id="three">
    <p class="text" id="threetext"> 3 </p>
  </div>
</div>

Answer 2

据我对您的问题的了解，可能会有所帮助。

$(document).ready(function(){
        var checker = false;
        $('.mariage').click(function(event){
            event.stopPropagation();
            if(!checker){
                $(".result_mariage").hide("slow");
                checker = true;
            }
            else{
                $(".result_mariage").show("slow");
                checker = false;
            }
        });
        $(".result_mariage").on("click", function (event) {
            event.stopPropagation();
        });

        $(document).on("click", function () {
            if(!checker){
                $(".result_mariage").hide("slow");
                checker = true;
            }
            else{
                $(".result_mariage").show("slow");
                checker = false;
            }
        }); 
    });

当我使用jQuery单击其他元素时隐藏元素

2 个答案:

编辑答案

最终代码：

原始答案