我正在页面右侧使用PHP构建递归树菜单。 默认情况下,树形菜单不展开。 我将我的页面包含在具有pageID =?的php中。
如何扩展与树菜单相关的ul if(pageID = liid)?
例如:
如果pageID = 87 == li id = 87;
我如何在该UL的电子>计算机>平板电脑>索尼平板电脑中自动展开或显示
这是我的右侧树菜单:
ul.treeanaul ul.collapse li {
display: none;
}
.expand {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="treeanaul"><li id="71"><span class="yantreeok"></span><a href="kategori/electronics" style="background-color: rgb(237, 237, 237);">ELECTRONICS</a><ul '73'="" class="gizlegoster"><li id="73" class=""><span class="yantreeok"></span><a href="kategori/music-systems">MUSIC SYSTEMS</a><ul '76'="" class="gizlegoster"><li id="76" class=""><span class="yantreeok"></span><a href="kategori/akai">AKAI</a><ul '79'="" class="gizlegoster"><li id="79" class=""><a href="kategori/akai-decks">AKAI DECKS</a></li></ul></li><li id="75" class=""><span class="yantreeok"></span><a href="kategori/technics">TECHNICS</a><ul '78'="" class="gizlegoster"><li id="78" class=""><a href="kategori/technics-amplifier">TECHNICS AMPLIFIER</a></li></ul></li><li id="74" class=""><span class="yantreeok"></span><a href="kategori/sony">SONY</a><ul '77'="" class="gizlegoster"><li id="77" class=""><a href="kategori/sony-amplifier">SONY AMPLIFIER</a></li></ul></li></ul></li><li id="72" class=""><span class="yantreeok"></span><a href="kategori/computers">COMPUTERS</a><ul '82'="" class="gizlegoster"><li id="82" class=""><span class="yantreeok"></span><a href="kategori/tablets">TABLETS</a><ul '86'="" class="gizlegoster"><li id="86" class=""><span class="yantreeok"></span><a href="kategori/sony-tablets">SONY TABLETS</a><ul '87'="" class="gizlegoster"><li id="87" class=""><a href="kategori/sony-xperia-tablet-z-review">Sony Xperia Tablet Z Review</a></li></ul></li><li id="83" class=""><span class="yantreeok"></span><a href="kategori/samsung-tablets">SAMSUNG TABLETS</a><ul '85'="" class="gizlegoster"><li id="85" class=""><a href="kategori/samsung-galaxy-tab-s2-9-7">SAMSUNG Galaxy Tab S2 9.7”</a></li><li id="84" class=""><a href="kategori/samsung-galaxy-tab-s2-8">SAMSUNG Galaxy Tab S2 8\"</a></li></ul></li></ul></li><li id="81" class=""><a href="kategori/desktop">DESKTOP</a></li><li id="80" class=""><a href="kategori/laptops">LAPTOPS</a></li></ul></li></ul></li></ul>
<script>
$(document).ready(function () {
//yan menüdeki menü başlıklarına tıklayınca elemanlarını açıp kapıyor
$('ul.treeanaul li').click(function(e) {
if ($(this).find('>ul').hasClass('treeanaulAktifet')) {
$(this).children('ul').removeClass('treeanaulAktifet').children('li').slideUp();
e.stopPropagation();
} else {
$(this).children('ul').addClass('treeanaulAktifet').children('li').slideDown();
e.stopPropagation();
}
});
// yan menü de linklere tıklayınca okların yönlerini değiştiriyor
$('ul.treeanaul li').click(function (e) {
if ($(this).find("span").is(".yantreeok, .asagitreeok")) {
$(this).find('span:first').toggleClass('asagitreeok yantreeok');
e.stopPropagation();
} else {
e.stopPropagation();
}
});
});
</script>
<script>
$(document).ready(function(){
var veriID = 82;
console.log(veriID);
$("#" + veriID).parents("li").click();
$("#" + veriID).parents("li").addClass("liaktif");
$("#" + veriID).children("li > a").css("background-color","#ededed");
});
</script>