Benutzereinstellungen im Dropdown-Menü

ich den Code untenBenutzereinstellungen im Dropdown-Menü

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

Also, mein Problem ist in href="#", wenn ich das Beispiel href für füllen example.html es nicht funktioniert ... Also, wenn ich das Skript zu entfernen, dass der Inhalt jquery1.8.2 dann funktioniert der Tag href, aber mein ganzes Projekt ist zerstört.
Irgendeine Lösung, wie man mein Problem löst, ohne jQuery zu entfernen?

Quelle

2016-06-29 roli roli

können Sie bitte Ihren Code in Snippet oder jsfiddle –

@SagarKodte dort ist es https://jsfiddle.net/mmg4amn4/ –

Ist nicht die Geige funktioniert? Ich habe einige der hrefs in tatsächliche urls geändert und es hat gut funktioniert. –

-1

Der Grund ist, dass Sie e.preventDefault() haben, die jede typische Ereignispropagierung dieses Elements stoppt. http://www.w3schools.com/jquery/event_preventdefault.asp.

Wenn Sie immer noch nicht das Standardverhalten wollen, dann was Sie können ist, einige wie erhalten Sie den Link, der für das angeklickte Element geöffnet sein muss und öffnen Sie es in einem neuen Tab oder Fenster oder was immer Sie wollen

Sie können den Link zu den hTML-Code wie

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

Dann in Javascript

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

ich habe umfassen gepostet nur den Code ohne Tests.

Quelle

2016-06-29 12:03:52

Das Problem ist, dass Sie Standardaktion (in diesem Fall die href) mit e.preventDefault(); verhindern. Sie müssen es löschen, damit das <a> funktioniert. Fügen Sie auch target="_blank" hinzu.

$("#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 ‚Beispiel sa Arbeits

Quelle

2016-06-29 11:59:32

Wow !!! Ja das ist mein Problem !!! e.preventDefault(); !!! pffff WTF ich versuche 2 Stunden mein Problem zu finden und ich habe vergessen e.preventDefault zu ändern () Also vielen Dank –

froh, Ihnen zu helfen! –

@roliroli in Erwägung ziehen, meine Antwort zu genehmigen, wenn es Ihnen geholfen hat. Vielen Dank. –

die Zeile entfernen e.preventDefault(); , was sie tut, ist, dass die Standardaktion der Veranstaltung wird nicht also ausgelöst werden, wenn Sie auf einem einen Anker klicken tag es wird dich nicht zu einer neuen URL bringen. so das Skript ändern:

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

Quelle

2016-06-29 12:01:48 frank

Benutzereinstellungen im Dropdown-Menü

Antwort

Verwandte Themen