2

我正在尝试创建一个<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

4

4 回答 4

5

它也应该工作-

$("#1").css("display","block");
于 2013-06-18T01:08:02.913 回答
3

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

应该：

$("#1").show();
于 2013-06-18T01:04:36.530 回答
2

首先你div's是空的。

下一个

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

应该是

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

li's您可以使用HTML-5 数据属性为所有的事件编写一个事件处理程序

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();
   });
});

检查小提琴

于 2013-06-18T01:04:43.253 回答
1

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

这是一个小提琴 - 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;}
于 2013-06-18T01:13:49.047 回答