JQuery 드롭 다운 목록 문제

JQuery 및 HTML/CSS를 사용하여 드롭 다운 목록을 만들려고합니다. LINK 1은 마우스를 올렸을 때 드롭 다운 목록을 올바르게 슬라이드하지만 LINK 3이 똑같이 작동하도록 할 수 없습니다. 너희들이 도움을 줄 수 있다면 고마울거야. 감사! 실수로 너무 일찍 <li>을 폐쇄했기 때문에JQuery 드롭 다운 목록 문제

자바 스크립트

$(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; 
}

출처

2017-02-13 jylny

그것은 단순히이다.

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

은 다음과 같아야합니다

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

희망이 도움이! :)

출처

2017-02-13 00:56:02

언제나 쉽게 놓칠 수 있습니다! 덕분에 도움을 주셔서 감사합니다. – jylny

JQuery 드롭 다운 목록 문제

답변

관련 문제