Question

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

有人知道如何制作这个功能。这是我的代码。

<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显示。也不会如何让混乱的文字再次出现。

非常感谢帮助。

：）

Answer 1

你可以制作一个按钮来切换这样的可见性：

<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');    
    }
})

Answer 2

您需要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>

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

2 个答案: