javascript - Jquery，点击标题，打开面板主体

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在collapse中，面板是关闭的。

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

感谢您的帮助:)

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>