我正在使用此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();
有人吗?
能否请您阐述一下预期和实际行为一点? –