JQuery Dropdown Liste Probleme

Ich versuche, eine Dropdown-Liste mit JQuery und HTML/CSS zu machen. LINK 1 schiebt eine Drop-down-Liste schön beim Mausklick, aber ich kann LINK 3 nicht gleich funktionieren. Ich würde mich freuen, wenn Sie mir helfen könnten. Vielen Dank!JQuery Dropdown Liste Probleme

Javascript

$(document).ready(function() { 
    $(".main_bar > li").hover(function() { 
     $(this).find(".sub_bar").slideDown(200); 
    }, function() { 
     $(this).find(".sub_bar").slideUp(200); 
    }); 
});

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 

    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="stylesheet.css" type="text/css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    <title></title> 
</head> 
<body> 
    <nav> 
     <ul class="main_bar"> 
      <li>LINK1 
       <ul class="sub_bar"> 
        <li>LINK1</li> 
        <li>LINK2</li> 
        <li>LINK3</li> 
       </ul> 
      </li> 
      <li>LINK2</li> 
      <li>LINK3</li> 
       <ul class="sub_bar"> 
        <li>LINK1</li> 
        <li>LINK2</li> 
        <li>LINK3</li> 
       </ul> 
      <li>LINK4</li> 
     </ul> 
    </nav> 
</body> 
</html>

CSS

* { 
    margin:0px; 
    padding:0px; 
} 

ul { 
    list-style:none; 
} 

ul.main_bar > li { 
    float:left; 
    width:25%; 
    text-align:center; 
} 

ul.sub_bar { 
    display:none; 
}

Quelle

2017-02-13 jylny

Es ist einfach, weil Sie versehentlich die <li> zu früh geschlossen haben.

<li>LINK3</li> 
    <ul class="sub_bar"> 
    <li>LINK1</li> 
    <li>LINK2</li> 
    <li>LINK3</li> 
    </ul>

Sollte sein:

<li>LINK3 
    <ul class="sub_bar"> 
    <li>LINK1</li> 
    <li>LINK2</li> 
    <li>LINK3</li> 
    </ul> 
</li>

hoffe, das hilft! :)

Quelle

2017-02-13 00:56:02

Immer das Einfache vermisst! Es hat funktioniert, danke für die Hilfe: D Wird so schnell wie möglich geantwortet. – jylny

JQuery Dropdown Liste Probleme

Antwort

Verwandte Themen