自己改了一下，不管我点的是哪一个li，显示跟隐藏都是在第一个li里面切换，求指导。
<div>
<!--<h4 id="dj">
<span class="fl">我喜欢吃的水果</span>
<span class="fr" id="spnTip">显示</span>
</h4>-->
<ul>
<li id="dj">苹果<span class="fr" id="spnTip">显示</span>
<ul>
<li>青苹果</li>
<li>红苹果</li>
</ul>
</li>
<li id="dj">甘桔<span class="fr" id="spnTip">显示</span>
<ul>
<li>青苹果</li>
<li>红苹果</li>
</ul>
</li>
<li id="dj">梨<span class="fr" id="spnTip">显示</span>
<ul>
<li>青苹果</li>
<li>红苹果</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
var $spn = $("#spnTip");
$("li").bind("click", function () {
$(this).children("ul").toggle(function(){
$spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
})
});
});
</script>
