jquery show / hide ul with class

时间:2016-01-12 07:29:05

标签: jquery show-hide

我有html结构。当有人鼠标悬停在main_cat ul,li(maincat_1)上时,我想用subcat_1显示相应的ul

<div style="display:none;" id="dd_top_cat">
    <div class="main_cat">
    <ul>
        <li class="maincat_1"><span>Vehicles</span></li>
        <li class="maincat_8"><span>Properties</span></li>
    </ul>
    </div>
    <div class="sub_cat">
        <ul style="display:none;" class="ul_subcat_1" id="subcat_1">
            <li>Boats</li>
            <li>Cars</li>
            <li>Motorcycles</li>
            <li>Light Commercials</li>
            <li>Accessories &amp; Parts</li>
            <li>Other Vehicles</li>
        </ul>
        <ul style="display:none;" class="ul_subcat_8" id="subcat_8">
            <li>Apartments</li>
            <li>Houses</li>
            <li>Commercial Properties</li>
            <li>Land</li>
            <li>Rooms</li>
            <li>Other Properties</li>
        </ul>
    </div>
</div>

2 个答案:

答案 0 :(得分:0)

 $(document).ready(function () {     

    $('.main_cat').find('li').mouseover(function () {          
        szClass = $(this).attr('class');
        szClass = szClass.replace("main", "ul_sub");
        $('.sub_cat').find("ul").css("display", "none");
        $('.sub_cat').find("ul." + szClass).css("display", "");
    });
});

答案 1 :(得分:0)

对于未格式化的问题,我们深表歉意。我在找下面的答案, Hover LI to show div