Question

我想制作jQuery函数来显示/隐藏一些元素（现在它是<li>）;

所以，我有这段代码：

.sub {
    display: none;
}

 ....

$(function show_sub(id) {
    $('#'+id).show('fast');
});

 .....

<a href="" onmouseover="show_sub('id1')" onclick="return false;"> Here is it </a> 
<li id="id1" class="sub"> .... </li>

在互联网上，我只找到了必须硬编码元素id的函数。

我知道我的jQuery函数不正确。

拜托，帮助我！

Answer 1

你可以清理你的代码就像这样做

HTML

<a href="#"> Here is it </a> 
<li class="sub"> .... </li>

的Javascript

$(function() {
    $('a[href="#"]')
       .on('hover', function() {
           $(this).next('li').show('fast'); // or toggle();
       })
       .on('click', function(ev) {
           ev.preventDefault()
       })
});

这样做可以避免无用的标记，冗余信息和内联处理程序。

示例小提琴：http://jsfiddle.net/GYye8/

Answer 2

您需要获取要显示/隐藏的元素。通过id获取它是一种方式，但还有更多。

请看jquery selectors。

例如，您可以通过以下方式显示带有“sub”类的元素：

$(".sub").show();

Answer 3

$("li.sub").show()会显示课程li的所有sub。

那是你的追求吗？

Answer 4

您可以尝试以下代码

<强> HTML

<a href="#" class="li-toggler" data-toggle="id1">li toggler</a>   
<li id="id1">sometext</li>

<强> JS

$("a.li-toggler").click(function() {
   $("#"+$(this).attr("data-toggle")).toggleClass("sub");
});

JQuery显示/隐藏没有硬编码ID

4 个答案: