Question

我有这个小组：

<div class="panel">
        <div class="panel-heading" style="cursor:pointer"> blablabla
            <div class="pull-right"><a href="#" data-perform="panel-collapse"><i class="ti-plus"></i></a> <a href="#" data-perform="panel-dismiss"></a></div>
        </div>
        <div class="panel-wrapper collapse" aria-expanded="true">
            <div class="panel-body">
                unicorn
            </div>
        </div>
    </div>

我写了这个jquery：

<script>
    $('.panel').on('click', function() {
        $(this).children().toggleClass('panel-wrapper collapse, panel-wrapper collapse in');
    });
</script>

但无论我在哪里点击它，这都会关闭。现在我只想打开面板，如果我单击面板标题。（整个面板标题，目前仅当我点击那个小<i> icon时才打开面板）

如果我再次单击该面板，它应该再次关闭。

<div class="panel-wrapper collapse **in**">将是一个封闭的小组。如果崩溃中没有in，则面板将关闭。

我希望有人可以帮助我。我很抱歉我的英语不好。

感谢您的帮助:)

Answer 1

您应该使用next()

$('.panel-heading').on('click', function() {
        $(this).next('.panel-wrapper').toggleClass(' in');
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel">
        <div class="panel-heading" style="cursor:pointer"> blablabla
            <div class="pull-right"><a href="#" data-perform="panel-collapse"><i class="ti-plus"></i></a> <a href="#" data-perform="panel-dismiss"></a></div>
        </div>
        <div class="panel-wrapper collapse" aria-expanded="true">
            <div class="panel-body">
                unicorn
            </div>
        </div>
    </div>

您可以使用slideToggle("slow")在面板中缓慢滑动或在css中使用-webkit过渡。

$('.panel-heading').on('click', function() {
        $(this).next('.panel-wrapper').slideToggle("slow");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel">
        <div class="panel-heading" style="cursor:pointer"> blablabla
            <div class="pull-right"><a href="#" data-perform="panel-collapse"><i class="ti-plus"></i></a> <a href="#" data-perform="panel-dismiss"></a></div>
        </div>
        <div class="panel-wrapper collapse" aria-expanded="true">
            <div class="panel-body">
                unicorn
            </div>
        </div>
    </div>

Answer 2

$('.panel-heading').on('click', function() {
    $(this).parent().children().toggleClass('in');
});

Answer 3

这可能是你想要的东西

 <script>
        $('.panel-heading').on('click', function() {
            $(this).children().toggleClass('panel-wrapper collapse, panel-wrapper collapse in');
        });
    </script>

Jquery，点击标题，打开面板正文

3 个答案: