Question

我尝试使用<ul>对象创建一个<li>来滑动UL并显示特定的div。我有这些div标签：

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

这个清单：

<ul class="meny">
   <li id="show1">Show 1</li>
   <li id="show2">Show 2</li>
   <li id="show3">Show 3</li>
</ul>

为什么这个JS不起作用？

$(function() {
   $("#show1").click(function() {
       $(".meny" ).toggle("slide");
       $("#1").click("show");
   });
});

我一整夜都在努力......

修改

我正在尝试让我的项目在按下特定列表对象时触发CLICK事件。完成后，整个ul应该滑开并显示一个指定的div。

请参阅：http://aatw.se/test/booking.html

Answer 1

它也应该起作用 -

$("#1").css("display","block");

Answer 2

$("#1").click("show");

应该是：

$("#1").show();

Answer 3

首先，您的div's为空。

下一步

 $("#1").click("show");

原来是

 $("#1").show();

您可以使用 HTML-5数据属性

为所有li's写一个事件处理程序

<强> HTML

<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>

<ul class="meny">
   <li data-id="1">Show 1</li>
   <li data-id="2">Show 2</li>
   <li data-id="3">Show 3</li>
</ul>

<强> JS

$(function() {
   $("li").click(function() {
       $(".meny" ).toggle("slide");
       $("#" + $(this).data('id')).show();
   });
});

<强> Check Fiddle

Answer 4

如上所述，您需要调用show函数。你的div是空的不是问题。但是你应该在页面加载时隐藏它们，或者在css中将它们设置为none。

这是一个小提琴 - http://jsfiddle.net/D6qUe/2

这是您的更新代码

$("#show1").click(function() {
   $(".meny" ).toggle("slide");
   $("#1").show();
});

$('div').click(function(){
    $('.meny').toggle('slide');
    $(this).hide();    
});

可能的css

div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}

如何从li对象中显示特定的div？

4 个答案: