Форум

Daniel Defo · #1 (**permalink**) 28.02.2015, 20:44

Доброго времени суток.
Имеется меню

<ul id="nav">
				<li><a href="#"><i class="glyphicon glyphicon-wrench"></i> Услуги</a>
                    <div class="subs">
                        <div>
                            <ul>
                                <li><h3>Submenu #1</h3>
                                    <ul>
                                        <li><a href="#">Link 1</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>

и

jQuery(window).load(function() {

    $("#nav > li > a").click(function () { // binding onclick
        if ($(this).parent().hasClass('selected')) {
            $("#nav .selected div div").slideUp(100); // hiding popups
            $("#nav .selected").removeClass("selected");
        } else {
            $("#nav .selected div div").slideUp(100); // hiding popups
            $("#nav .selected").removeClass("selected");

            if ($(this).next(".subs").length) {
                $(this).parent().addClass("selected"); // display popup
                $(this).next(".subs").children().slideDown(200);
            }
        }
    }); 


});

при клике на пункт меню, раскрывается субменю, и также закрывается...
как сделать чтобы оно еще закрывалось при клике в любом месте сайта?
пожалуйста подскажите...

рони · #2 (**permalink**) 28.02.2015, 21:21

Daniel Defo,
Вопрос по эвенту во встроенной функции.

Daniel Defo · #3 (**permalink**) 28.02.2015, 21:44

попробовал как в примере.. эффекта нет

рони · #4 (**permalink**) 28.02.2015, 21:54

Daniel Defo,
покажите код

рони · #5 (**permalink**) 28.02.2015, 22:06

Daniel Defo,
плагин может сделать тоже самое что строки 18 -23

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
      li.selected{
        color: #FF0000;
      }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>

  jQuery(window).load(function() {
     $(document).on('click',  function(event) {
     if (!$('#nav').has(event.target).length) {
       $("#nav .selected div div").slideUp(100);
       $("#nav .selected").removeClass("selected");
     }
});
    $("#nav > li > a").click(function () { // binding onclick
        if ($(this).parent().hasClass('selected')) {
            $("#nav .selected div div").slideUp(100); // hiding popups
            $("#nav .selected").removeClass("selected");
        } else {
            $("#nav .selected div div").slideUp(100); // hiding popups
            $("#nav .selected").removeClass("selected");

            if ($(this).next(".subs").length) {
                $(this).parent().addClass("selected"); // display popup
                $(this).next(".subs").children().slideDown(200);
            }
        }
    });


});


  </script>
</head>

<body>
<ul id="nav">
				<li><a href="#"><i class="glyphicon glyphicon-wrench"></i> Услуги</a>
                    <div class="subs">
                        <div>
                            <ul>
                                <li><h3>Submenu #1</h3>
                                    <ul>
                                        <li><a href="#">Link 1</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        test click close
</body>

</html>

Daniel Defo · #6 (**permalink**) 28.02.2015, 22:49

хммм у меня гдет конфликт идет значит

Daniel Defo · #7 (**permalink**) 28.02.2015, 23:07

рони спасибо нашел косяк...

Форум

Справочник

Discord чат

Курсы javascript