Пользовательские настройки выпадающего меню

У меня есть код нижеПользовательские настройки выпадающего меню

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
</head> 
<body> 
<div id="wrap"> 
<h1>Stylish User Settings Menu</h1> 

<div id="dropdown" class="ddmenu"> 
    Landi <img src="../images_app/off.png" width="20" height="20" style="margin-left:100px"> 
    <ul> 
    <li><a href="#">My Profile</a></li> 
    <li><a href="#">Friend Requests</a></li> 
    <li><a href="#">Account Settings</a></li> 
    <li><a href="#">Support</a></li> 
    <li><a href="#">Log Out</a></li> 
    </ul> 
</div> 
</div> 
<script type="text/javascript"> 
     $("#dropdown").on("click", function(e){ 
     e.preventDefault(); 
     if($(this).hasClass("open")) { 
     $(this).removeClass("open"); 
     $(this).children("ul").slideUp("fast"); 
     } else { 
     $(this).addClass("open"); 
     $(this).children("ul").slideDown("fast"); 
     } 
    }); 
    </script> 
    </body> 
    </html>

Итак, моя проблема заключается в href="#", когда я заполнить href, например example.html это не работает ... Так что, когда я удалить сценарий, содержание jquery1.8.2 то работает тег href, но весь мой проект уничтожен.
Любое решение, как решить мою проблему без удаления jQuery?

источник

2016-06-29 roli roli

Не могли бы вы поместить свой код в фрагмент или jsfiddle –

@SagarKodte там https://jsfiddle.net/mmg4amn4/ –

Не работает ли скрипка? Я изменил некоторые из href's на фактический url, и он работал нормально. –

-1

Причина в том, у вас есть e.preventDefault(), что останавливает любое типичное распространение события этого элемента. http://www.w3schools.com/jquery/event_preventdefault.asp.

Если вы по-прежнему не хотите поведения по умолчанию, то то, что вы можете, каким-то образом, как получить ссылку, которая должна быть открыта для выбранного элемента и открыть ее в новой вкладке или окне или что вы хотите

Вы можете включить ссылку на HTML, как

<ul> 
    <li> 
     <a href="#" data-link="my-profile.html">My Profile</a> 
    </li> 
</ul>

Затем в JavaScript

$("#dropdown").on("click", function(e){ 
    e.preventDefault(); 
    window.open($(this).data("link"), '_blank'); 
}

Я просто разместил код без тестирования.

источник

2016-06-29 12:03:52

Проблема в том, что вы предотвращаете действие по умолчанию (в данном случае href) с e.preventDefault();. Вам нужно удалить его, чтобы сделать работу <a>. Также добавьте target="_blank".

$("#dropdown").on("click", function(e){ 
 
     if($(this).hasClass("open")) { 
 
     $(this).removeClass("open"); 
 
     $(this).children("ul").slideUp("fast"); 
 
     } else { 
 
     $(this).addClass("open"); 
 
     $(this).children("ul").slideDown("fast"); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 

 
<div id="dropdown" class="ddmenu"> 
 
    Landi <img src="../images_app/off.png" width="20" height="20" style="margin-left:100px"> 
 
    <ul> 
 
    <li><a href="http://google.es" target="_blank">My Profile</a></li> 
 
    <li><a href="http://google.es" target="_blank">Friend Requests</a></li> 
 
    <li><a href="http://google.es" target="_blank">Account Settings</a></li> 
 
    <li><a href="http://google.es" target="_blank">Support</a></li> 
 
    <li><a href="http://google.es" target="_blank">Log Out</a></li> 
 
    </ul> 
 
</div> 
 
</div>

Here «са рабочий пример

источник

2016-06-29 11:59:32

Wow !!! да, это моя проблема !!! e.preventDefault(); !!! pffff WTF im пытается 2 часа найти мою проблему, и я забыл изменить e.preventDefault () ;. Так что большое спасибо –

рад помочь вам! –

@roliroli подумать о том, чтобы одобрить мой ответ, если он вам помог. Благодарю. –

Удалите строку e.preventDefault(); , что он делает то, что действие по умолчанию события не будет срабатывать, т.е. если вы нажмете на якорь Этот тег не приведет вас к новому URL-адресу. так изменить сценарий к:

<script type="text/javascript"> 
    $("#dropdown").on("click", function(){ 
     if($(this).hasClass("open")) { 
      $(this).removeClass("open"); 
      $(this).children("ul").slideUp("fast"); 
     } else { 
      $(this).addClass("open"); 
      $(this).children("ul").slideDown("fast"); 
     } 
    }); 
</script>

источник

2016-06-29 12:01:48 frank

Пользовательские настройки выпадающего меню

ответ

Смежные вопросы