私は次のマークアップを持っています
<a class="list-group-item" href="#">
<div class='row'>
<div class='col-xs-10 shows-submenu'>
<h4 class="list-group-item-heading">A title</h4>
</div>
</div>
</a>
<div class='list-group-item hidden-group-item hide'>
<div class="row">
<div class="col-sm-12">
<p class="list-group-item-text">
Some text
</p>
</div>
</div>
</div>
「shows-submenu」をクリックしたときに、「hidden-group-item」の「hide」クラスを削除したいと思います。私は次のjQueryでそれをやろうとしていました
$(function(){
$('body').on('click', '.shows-submenu', function() {
if ($(this).next('.hidden-group-item').hasClass('hide')) {
$('.hidden-group-item').addClass('hide');
$(this).next('.hidden-group-item').toggleClass('hide');
}
else {
$(this).next('.hidden-group-item').toggleClass('hide');
}
$('.hidden-form-item').addClass('hide');
});
});
しかし、私はそれを機能させることができません。next() メソッドは、「shows-submenu」クラスがタグ全体に追加された場合にのみ機能するようですが、必要な col-xs-10 div には追加されません。
これが機能しない理由を理解できますか？
ありがとう
以下を置き換えます。
$(this).next('.hidden-group-item')
と
$(this).closest('a').next('.hidden-group-item')
そしてさらに試みる。
説明: next()一致した要素のセット内の各要素の直後の兄弟を取得します。セレクターが指定されている場合、そのセレクターに一致する場合にのみ、次の兄弟を取得します。そしてhidden-group-item、あなたのhtmlの兄弟ではありません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加