Question

我有以下代码

<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？

Answer 1

问题在于您使用e.preventDefault();阻止默认操作（在本例中为href）。您需要将其删除才能使<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是一个有效的例子

Answer 2

删除第e.preventDefault();行它的作用是不会触发事件的默认动作，即如果你点击一个锚标记，它将不会带你到一个新的网址。所以将脚本更改为：

<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>

Answer 3

原因是你有e.preventDefault()来阻止该元素的任何典型事件传播。 http://www.w3schools.com/jquery/event_preventdefault.asp

如果你仍然不想要默认行为，那么你可以做些什么，一些如何获得所点击元素需要打开的链接并在新标签或窗口中打开它或者你想要什么< / p>

您可以添加指向

的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');  
}

我刚刚发布了代码而未经过测试。

用户设置下拉菜单

3 个答案: