如果pageID == li id,如何扩展父ul?

时间:2019-04-25 08:05:03

标签: php jquery recursion

我正在页面右侧使用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>

enter image description here

0 个答案:

没有答案