0

我有一个下拉菜单，但我可以让lis 在单击后保持可见。我想要的是li当我点击菜单外或点击时隐藏ul：

我尝试使用return false;，event.stopPropagation();但我无法让它工作 - 我希望有人知道如何解决这个问题 - 我认为它应该相当简单。

这是我的代码：

<link rel="stylesheet" href="css/4style.css" type="text/css" media="screen">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<ul id="nav">
    <li >
        <a href="#">Topic 1</a>
        <ul class="show">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>

    <li >
        <a href="#">Topic 2</a>
        <ul class="show">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>   
        </ul>
    </li>
</ul>

<script type="text/javascript">
    $(document).ready(function(){

    $('#nav li a').click(function () { // binding onclick
        if ($(this).hasClass('select_ul')) {

            $("#nav li ul").slideUp(100); // hiding submenu
            $("#nav .select_ul").removeClass("select_ul");
        } else {

            $("#nav li ul").slideUp(100); // hiding submenu
            $("#nav .select_ul").removeClass("select_ul");

            if ($(this).next(".show").length) {
                $(this).addClass("select_ul"); // display popup
                $(this).next(".show").slideDown(200);     
            }
        }
    });

    $('#nav li ul li a').click(function() {
        $("#nav li ul li a.select_li").removeClass("select_li");
        $(this).addClass('select_li');
    });

    // SKJUL NAV VED KLIK UDENFOR
    $('html').click(function() {
        $("#nav").hide(100); 
    });

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

}); //END OF DOCUMENT READY
</script>
4

3 回答 3

0

试试这个，

$(document).ready(function () {
    $('ul#nav > li > a').click(function () { // onclick for parent anchor tags
        $("#nav li ul").hide(); // hiding submenu
        $("#nav .select_ul").removeClass("select_ul");

        if ($(this).next(".show").length) {
            $(this).addClass("select_ul"); // display popup
            $(this).next(".show").slideDown(200);
        }
    });
    $('#nav li ul li a').click(function (e) {
        e.preventDefault();
    });
    // SKJUL NAV VED KLIK UDENFOR
    $('html').click(function () {
        $("#nav").hide(100);
    });
});

演示 1

更新了，是的，这是因为$('html').click()评论或删除这event将解决这个问题

 $('html').click(function () {
       // $("#nav").hide(100);
 });

演示 2

于 2013-10-22T08:39:48.247 回答
0

我决定把东西去掉一点，因为你想slideDown() ，slideUp()我选择检查可见性，否则我会使用 jQuery 的toggle().

$('#nav li').on('click', function( e ) {

    e.stopPropagation();

    /**
     *    $Menu
     *        - get the child list of the
     *          currently clicked Menu.
     *
     *    $thisMenu 
     *        - Transvrse up the tree to find
     *          the User's Click, of <li>
     *          or <a> parent list container.
     *
     *     $activeMenus
     *        - Get Menus other than the current
     *          list clicked.
    **/
    var $Menu = $(this).children('ul.show'),
        $thisMenu = $(e.target).closest('.show'),
        $activeMenus = $('#nav li').not(this).find('ul.show');

    /**
     *  Only If the Clicked menu isn't visible
    **/
    if ( !$Menu.is(':visible') ) {

      /**
       *  If this menu here, doesn't the Class 'Active'
       *  Slide up other Active menus.
      **/
      if ( !$thisMenu.hasClass('active') )
           $activeMenus.slideUp().removeClass('active');

        /**
         *  Give this menu a new Class of Active
         *  Adding Purple background && Slide it down.
        **/
        $Menu.slideDown().addClass('active');        
    } 
});

确实，您使用正确event.stopPropagation()；click在 on事件之后立即调用。

小提琴：http: //jsfiddle.net/axKjT/2/

于 2013-10-22T08:43:46.600 回答
0

请考虑以下示例：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

<ul id="nav">
<li class="nav2"><a href="#">Approved</a>
    <ul>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-251</a></li>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-252</a></li>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-253</a></li>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-254</a></li>
        <li class="pft-file ext-approved"><a href="javascript:alert('ok');">051254-255</a></li>
    </ul>
</li>


<script type="text/javascript"> 
$(document).ready( function() {

 // Hide all subfolders at startup
 $("#nav").find("UL").hide();

// Expand/collapse on click
 $(".nav2 A").click( function() {
    $(this).parent().find("UL:first").slideToggle("medium");
    if( $(this).parent().attr('className') == "nav2" ) return false;
 });

 });
</script>
于 2013-10-22T08:53:50.943 回答