2017-11-20 5 views
0

私は複数レベルのリストを持っています。 リストの最初のレベルのみが表示されます。 これで、リスト内の要素をクリックして、サブ項目が表示されます。リストOpen OnClick

どうすればjsで可能ですか?

<!DOCTYPE html> 
<html> 
<body> 

<h2>A Nested List</h2> 
<div id="mylist"> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 
</div> 
</body> 
</html> 

答えて

0

はい、次のことができます。

// JavaScript 
 
jQuery("li:has(ul)").click(function(){ // When a li that has a ul is clicked ... 
 
\t jQuery(this).toggleClass('active'); // then toggle (add/remove) the class 'active' on it. 
 
});
/* CSS */ 
 
ul li ul { 
 
    display: none; /* Hide the nested list first */ 
 
} 
 
ul li.active ul { 
 
    display: block; /* Show the list when class 'active' is added to the li */ 
 
    color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>A Nested List</h2> 
 
<div id="mylist"> 
 
<ul> 
 
    <li>Coffee</li> 
 
    <li>Tea 
 
    <ul> 
 
    <li>Black tea</li> 
 
    <li>Green tea</li> 
 
    </ul> 
 
    </li> 
 
    <li>Milk</li> 
 
</ul> 
 
</div>

+0

Perfect..thanksを... – xion