当我用 jQuery 点击另一个元素时隐藏元素

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/

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

希望这些解释足够清楚，即使我对此表示怀疑，您也能帮助我：/ 请不要犹豫，询问更多信息，以便我可以为您提供您需要的帮助。

所以简而言之，当我点击我的新切换时，如何隐藏我之前的切换？

Answer 1

编辑的答案

因此，您遇到 OP 的最大问题是您没有尝试理解代码。许多新程序员（不幸的是，同样许多一直在编码的人）的一个大问题是他们就是我所说的抄写员。在 stackoverflow 上复制教程和答案可以让您创建自己的网站、完成一些咨询工作，甚至支持您的整个职业生涯，但这与真正知道如何编程不同。

在 SO 上做教程和提问是完全可以的（事实上，这是我学到了 90% 的知识），但你必须这样做，以便从你发现的内容中学习而不仅仅是完成你正在做的事情。我对您的建议是真正重新阅读我的原始答案（我在下面保持不变）并了解我展示的内容如何用于完成您想要的。 话虽如此，我完成了我开始的工作，所以让我们继续解决问题：

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

• 我的代码获取被点击元素的 ID，并使用它来查找应该取消隐藏的元素的 ID。虽然您正确更改了查找代码以适合文本上的 ID，但您没有向被点击的图像添加任何 ID，因此我的代码无法执行任何操作。
• 您也没有删除您最初用于实现此功能的 4 个函数，因此它看起来好像我的代码在做某事并且工作不正确，而实际上我的代码什么也没做而您的代码仍在做它之前做了什么（虽然我肯定看到你之前说的是什么错误）。
• 关于我上面的复制编码器咆哮，请注意您和我如何以不同的方式解决问题以及您可以从中学到什么。
  • 而您想通过查找每个项目的类来为每个项目附加一个监听器函数（这完全不相关，但您没有正确使用类和“mariage”等...更适合作为您仍然可以风格的 id classes）我选择为单个类的所有元素附加一个监听器，然后通过 id 查找它们。
  • 您的解决方案要求您为添加的每个项目编写新的 JS 代码，并且每次编写这些函数时都存在拼写错误或忘记更改某些内容的风险。
  • 我的解决方案允许您向 HTML 添加任意数量的元素，而无需更改 JS。只要您的图片有一个 id 并且文本的 id 等于“image 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;
            }
        }); 
    });