使单独的切换按钮一起工作

Make seperate toggle buttons work together

本文关键字：按钮 一起 工作 单独      更新时间：2023-09-26

我有一些信息容器，在开始时显示一些信息，当点击关闭时，他们应该隐藏和一个信息按钮应该显示，使他们再次点击显示。整个页面都有类似的信息字段和按钮。我只想显示和隐藏点击的，而不是全局的。

有谁知道如何使这个函数。这是我的代码。

<div class="it-con">
   <div class="mess-text">
       <span class="x-btn">&#10005;<br></span>
       <h4>Headline</h4>
       <br>
       <p>Some Info</p>
   </div>
   <div class="toggle">
        <div class="inf-btn">Info</div>
   </div>
</div>

这是我目前想到的jquery。

$(".it-con .x-btn").click(function(e){
     $(this).closest('.mess-text').fadeOut(100);    
})

，但不知道如何使inf-btn显示。也不知道如何让混乱的文本重新出现。

非常感谢你的帮助。

:)

您想要像THIS这样的东西吗?

代码: 

$(".inf-btn").click(function (e) {
    $(this).siblings('.mess-text').slideToggle();
    $(this).text(function (i, text) {
        return text === "Hide info" ? "Show info" : "Hide info";
    });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="it-con">
    <button class="inf-btn">Hide info</button>
    <div class="mess-text">
         <h4>Headline</h4>
        <br>
        <p>Some Info</p>
    </div>
</div>
<div class="it-con">
    <button class="inf-btn">Hide info</button>
    <div class="mess-text">
         <h4>Headline</h4>
        <br>
        <p>Some Other Info</p>
    </div>
</div>

你可以创建一个这样的按钮来切换可见性:

<div class="it-con">
   <div class="mess-text">
       <span class="x-btn">&#10005;<br></span>
   </div>
   <div class="toggle">
       <h4>Headline</h4>
       <br>
       <p>Some Info</p>  
   </div>
</div>

JS: 

$(".it-con .x-btn").click(function(e){
    info = $(this).parent().next('.toggle')
    info.toggle();
    if (info.is(":visible")) {
      $(this).html('HIDE');  
    } else {
      $(this).html('SHOW');    
    }
})
相关文章：