我希望 show/hide 的 Jquery 脚本始终显示隐藏内容之一，并且永远不会一次显示超过 1 个隐藏文本

Question

我希望这个 Show/hide 脚本在启动时显示第一个隐藏文本，并且始终只显示最多一个隐藏内容。因此，如果我显示文本 3 的隐藏内容，并且在我查看文本 1 的隐藏内容之前，我知道如果我按下文本 3，我希望文本 1 向后滑动，所有这些都在我现在拥有的同一个 .slidetoggle 中。

$(document).ready(function() {
            $(".neverseen img").click(function() {
                $(this).parent().toggleClass("active");
                $(".neverseen p").slideToggle("slow");
                return false;
            });
        });
        $(document).ready(function() {
            $(".neverseen1 img").click(function() {
                $(this).parent().toggleClass("active");
                $(".neverseen1 p").slideToggle("slow");
                return false;
            });
        });
        $(document).ready(function() {
            $(".neverseen2 img").click(function() {
                $(this).parent().toggleClass("active");
                $(".neverseen2 p").slideToggle("slow");
                return false;
            });
        });
        $(document).ready(function() {
            $(".neverseen3 img").click(function() {
                $(this).parent().toggleClass("active");
                $(".neverseen3 p").slideToggle("slow");
                return false;
            });
        });

#leftpanel h1 {font-size: 18px; font-family: 'Montserrat bold'; color:#b0a887; border-top: 1px solid #b0a887; font-style: normal;}
#leftpanel p {display: none; color: #333; font-size: 14px;}
#leftpanel a {margin-left: 230px;}
#leftpanel img {}

.secondImage{
  display: none;
}

.active .firstImg{
  display:none;
}

.active .secondImage {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="leftpanel">
                <div class="neverseen">
                    <h1>First title</h1>
                    <a href="#" id="show">
                        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
                        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
                    </a>
                    <p>First text</p>
                </div>
                <div class="neverseen1">
                    <h1>Second title</h1>
                    <a href="#" id="show1">
                        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
                        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
                    </a>
                    <p>Second text</p>
                </div>
                <div class="neverseen2">
                    <h1>Third title</h1>
                    <a href="#" id="show2">
                        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
                        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
                    </a>
                    <p>Third text</p>
                </div>
                <div class="neverseen3">
                    <h1>Last title</h1>
                    <a href="#" id="show3">
                        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
                        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
                    </a>
                    <p>Last text</p>
                </div>
            </div>

Answer 1

你可以为此做一个简单的手风琴。

$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  });

Here is an example.

Answer 2

正如另一个答案中所建议的那样，您可以使用手风琴，但如果您不想改变您的方法，请执行以下操作，

添加sec class到neverseen{1/2/3}div的赞

<div id="leftpanel">
  <div class="sec neverseen">
    <h1>First title</h1>
    <a href="#" id="show" class='active'>
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p class='active'>First text</p>
</div>
<div class="sec neverseen1">
    <h1>Second title</h1>
    <a href="#" id="show1">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Second text</p>
</div>
<div class="sec neverseen2">
    <h1>Third title</h1>
    <a href="#" id="show2">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Third text</p>
</div>
<div class="sec neverseen3">
    <h1>Last title</h1>
    <a href="#" id="show3">
        <img class="secondImage" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png" width="40" height="40">
        <img class="firstImg" src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png" width="40" height="40">
    </a>
    <p>Last text</p>
</div>

现在我们不必为 individual 部分添加事件，我们可以在 sec class

添加事件

$(".sec img").click(function() {
    var isActive = $(this).parent().hasClass('active');
    $('.sec a').removeClass('active');
    $('.sec p').hide('slideUp');
    if(!isActive) {
      $(this).parent().toggleClass("active"); 
      $(this).parent().next("p").slideToggle("slow");
    }

    return false;
});

最后加上这个CSS，

#leftpanel p.active{
  display: block;  
}

Example

我在这里做的是将事件附加到 sec div.

下的所有图像

当有人点击它时，我在父级 div 上设置活动 class 并重置所有其他 div。

我希望 show/hide 的 Jquery 脚本始终显示隐藏内容之一，并且永远不会一次显示超过 1 个隐藏文本

I would like my Jquery script of show/hide to always display one of the hiddent conent and never display more then 1 hiddent text at once

html

javascript

css

jquery

show-hide