我正在使用此CSS-Tricks文章並將其轉換爲UL> LI而不是DT> DD方法。我只是想讓粉紅色的盒子在點擊時顯示子鏈接。具有多個鏈接的手風琴
由於某種原因,雖然我不能得到它的工作。我創建了一個的jsfiddle的在這裏(點擊粉紅色框):
//Accordion
\t (function($) {
\t
\t var allPanels = $('ul.sub-level').hide();
\t
\t $('.click-me').click(function() {
\t allPanels.slideUp();
\t alert('slide up');
// Problem line
\t $(this).parent().next().slideDown();
\t return false;
\t });
\t
\t })(jQuery);
ul { list-style: none; padding:0; margin:0; width: 400px; }
ul li { position:relative; background: #fafafa; margin-bottom:3px; height:20px; }
ul li > ul { margin-left: 30px; background: #e3e3e3; }
.click-me { display:block; width: 20px; height: 20px; position: absolute; top:0; right:0; background: #e4f; cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#">Link somewhere</a></li>
<li><a href="#">Link somewhere</a></li>
<li class="test">
<a href="http://google.com">Link somewhere</a>
<!-- I want to reveal accordion using this span tag -->
<span class="click-me"></span>
<!-- /end -->
<ul class="sub-level">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
<li><a href="#">Link somewhere</a></li>
</li>
</ul>
http://jsfiddle.net/ndczc728/1/
問題行都是這樣的(我認爲):
// Problem line
$(this).parent().next().slideDown();
有人嗎?
能否請您闡述一下預期和實際行爲一點? –