展開可能/折りたたみ可能な要素のカテゴリ インデックスを取得しようとしています。ユーザーがカテゴリをクリックすると、「catSel」の ID で再構築されます。
問題は、ユーザーが をクリックし<li>て 'catSel' id が追加された場合でも、.hide(); の影響を受けることです。そして、私はそれを望んでいません。ユーザーが要素をクリックしても<ul>、.hide(); の影響を受けないことに注意してください。
私が本当に欲しいのは、<ul>またはその<li>要素のいずれかが 'catSel' の id を持っている場合<ul>、.hide(); の影響を受けないことです。
コードとサンプル リンクは次のとおりです。<ul>が展開されていないが、その<li>子の 1 つが「catSel」の ID を持っていることがわかります。
編集：説明が悪くて申し訳ありませんが、まだうまく説明できませんが、 a<ul>またはその子<li>要素の1つに が含まれている場合、 のid="catSel"影響を受けないようにしたいの$('ul.catList:not(.level-0) li:has(ul):not(#catSel)').children('ul').hide();です。
アップデート：
このコードを追加しました：
// If an elementwith its id="catSel" show all of its parents and also update the parents class
$('#catSel').parents().show();
$('#catSel').parents().removeClass('plusimageapply');
$('#catSel').parents().addClass('minusimageapply');
そして今、私が望んでいたように機能しているようです。私の質問を理解しようとして助けてくれた皆さんに感謝します。
jsFiddle: http://jsfiddle.net/nNR9W/
HTML:
<li>
<a href="foo">Catalog Section 4</a>
<ul class="level-1 catList"><li class="plusimageapply">
<a href="foo">Quick Disconnects</a>
<ul class="level-2 catList" style="display: none; ">
<li id="catSel" class="selectedimage">
<a href="foo">Foster</a></li>
<li class="selectedimage">
<a href="foo">General Pump</a>
</li>
<li class="selectedimage">
<a href="foo">Hansen</a>
</li>
<li class="selectedimage">
<a href="foo">Parker</a>
</li>
</ul>
</li>
<li class="selectedimage">
<a href="foo">Quick Disconnects O-Rings</a>
</li>
</ul>
jQuery:
$(document).ready(function() {
// Set expandable UL elements class to 'plusimageapply'
$('ul.catList li:has(ul):not(#catSel)').addClass('plusimageapply');
// Set unexpandable LI elements class to 'selectedimage'
$('ul.catList li:not(:has(ul))').addClass('selectedimage');
// Set expanded UL elements class to 'minusimageapply'
$('ul.catList li#catSel:has(ul)').addClass('minusimageapply');
// Hide expandable UL elements that are not currently selected with ID 'catSel'
$('ul.catList:not(.level-0) li:has(ul):not(#catSel)').children('ul').hide();
// **** FIXED MY PROBLEM ****
// If an elementwith its id="catSel" show all of its parents and also update the parents class
$('#catSel').parents().show();
$('#catSel').parents().removeClass('plusimageapply');
$('#catSel').parents().addClass('minusimageapply');
// **************************
// Function for expand/collapse elements
$('ul.catList:not(.level-0) li:has(ul)').each(function(column) {
$(this).click(function(event) {
if (this == event.target) {
if ($(this).is('.plusimageapply')) {
$(this).children('ul').show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else {
$(this).children('ul').hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
});
});