Question

经过大量的谷歌搜索，我想到了如何使用Jquery切换。它似乎工作正常。但首先加载＆＃39; ul＆＃39;是可见并隐藏，如果我点击（所以切换似乎工作）我只是不知道如何隐藏ul加载，然后显示点击这里是我的代码

jQuery的（函数（$）{

$('.cliackable').click(function(){ $(this).find('ul').toggle();});

$('.cliackable').click(function(event) {
    event.stopPropagation();
});

}）; //结束函数

                    <div id="navigation-prof">

                        <ul class="sf-menu-prof"  >

                            <li style="color:#fff;" class="cliackable">

                              <?php echo get_avatar( $userdata->ID, 35 );?>

                                <ul>
                                        <div style="padding:15px 0px 0px 15px; ">
                                            <div class="left" style="padding-bottom:10px;">
                                                <?php echo get_avatar( $userdata->ID, 75 );?>
                                            </div>
                                            <div class="right" style="align:left">
                                                <a href="" class="login-head-font" style="text-align:left"><?php echo  $userdata->user_firstname .' ' . $userdata->user_lastname ;?></a>
                                            </div>

                                        </div>
                                    <div style="width:100%;">
                                    <li>
                                        <a class="login-head-font" href="http://thecampustree.com/your-profile">Profile</a>
                                    </li>
                                    <li>
                                        <a class="login-head-font" href="http://thecampustree.com/dashboard">Dashboard</a>
                                    </li>
                                    <li>
                                        <a href="<?php echo wp_logout_url( home_url() ); ?>" title="Logout">Logout</a>
                                    </li>   
                                    </div>
                                </ul>
                            </li>
                        </ul>


                    </div>

CSS＆GT;＆GT;

 #navigation-prof {width:35px; border-left:1px solid #999;padding:5px; border-right:1px solid #999;padding:0px 5px 0px 5px;}
 #navigation-prof  .sf-menu-prof ul li ul{display:none;}
 #navigation-prof  .sf-menu-prof ul{ background:#e73420; width:250px; margin:0px 0px 0px -200px;}
 #navigation-prof  .sf-menu-prof li li{background:#e73420;border-top:1px solid rgba(0,0,0,0.1); width: 235px; clear:both; padding:5px 0px 5px 15px; color:#fff;}
 #navigation-prof  .sf-menu-prof li li a {width: 235px; padding:5px 100px 5px 15px; color:#fff;}

////我是新人////感谢

Answer 1

您可以在文档就绪事件中隐藏它：

$('.cliackable ul').hide();

或使用CSS隐藏它：

#navigation-prof .sf-menu-prof li ul {
    display: none;
}

JQuery在Load上切换UL可见

1 个答案: