Показване на вложен UL с помощта на jQuery

Имам вложен ul за създаване на подменю. Искам събитие за щракване, което да покаже детето ul и да запази останалите свити.

HTML

<div class="sideMenu">  
<ul>
<li class="titledUl"><b>Dashboard</b>
                </li>
                    <ul class="subUl">
                        <li>Dash Tool 1
                        </li>
                        <li class="subUl">Dash Tool 2
                        </li>
                    </ul>
            </ul>   
            <ul>
                <li class="titledUl"><b>User Managment</b>
                </li>
                    <ul class="subUl">
                        <li>UM Tool 1
                        </li>
                        <li>UM Tool 2
                        </li>
                    </ul>
            </ul>
        </div>

jQuery

$( document ).ready(function() {
console.log( "ready!" );

$('.titledUl').click(function() {
    console.log('clicked')
    $(this).closest('.subUl').show();
    console.log("should show")
});
});

Той показва всички мои регистрационни файлове на конзолата, когато щракна върху родителската ul. (също sub ul са скрити с помощта на css display none)

Благодаря!


javascript html jquery css this
person ImJessW    schedule 05.03.2014    source източник
comment
Вашият HTML е невалиден. ‹/li› ‹ul class=subUl› ‹- не можете да поставите UL (или нещо друго) извън LI   -  person Diodeus - James MacFarlane    schedule 05.03.2014
comment
Изобщо не е необходимо да използвате JavaScript или jQuery, за да направите този вид интерактивно меню. Вижте CssMenuMaker.com и особено този урок: cssmenumaker.com/css-flyout-menus   -  person DOK    schedule 05.03.2014
comment
В съответствие с казаното от DOK, проверихте ли bootstrap? Те имат поддръжка на навигационно меню.   -  person VtoCorleone    schedule 05.03.2014
comment
Преработих моя Html. Успях да разбера jQuery.   -  person ImJessW    schedule 05.03.2014

Отговори (2)


arrow_upward
0
arrow_downward

Здравейте, работата ви е свършена тук: http://jsfiddle.net/webcarvers/RYvGv/

HTML:

<div class="sideMenu">
    <ul>
        <li class="titledUl"><b>Dashboard</b>
         <ul class="subUl">
            <li>Dash Tool 1</li>
            <li>Dash Tool 2</li>
        </ul>
        </li>

    </ul>
    <ul>
        <li class="titledUl"><b>User Managment</b>
        <ul class="subUl">
            <li>UM Tool 1</li>
            <li>UM Tool 2</li>
        </ul>
        </li>
    </ul>
</div>

CSS:

.subUl{
    display:none;
}
.titledUl{
    cursor:pointer;
}

JS:

$(document).ready(function(){
$('.titledUl').on('click', function() {
    $(this).closest('ul').find(".subUl").slideToggle(500);
});
});
person Mayank Tripathi    schedule 05.03.2014

arrow_upward
0
arrow_downward

Направих го с помощта на всички вас. Благодаря ти!

Нов HTML

            <div class="sideMenu">  
            <ul>
                <li class="titledUl"><b>Dashboard</b>
                    <ul class="subUl">
                        <li>Dash Tool 1
                        </li>
                        <li class="subUl">Dash Tool 2
                        </li>
                    </ul>
                </li>
            </ul>   
            <ul>
                <li class="titledUl"><b>User Managment</b>
                <ul class="subUl">
                        <li>UM Tool 1
                        </li>
                        <li>UM Tool 2
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

Нов jQuery

$( document ).ready(function() {
   console.log( "ready!" );

$('.titledUl').click(function() {
    console.log('clicked');
    $(this).children().show();
    console.log("should show");
});

});
person ImJessW    schedule 05.03.2014