Question

这是一个非常简单的html页面示例

<span class ="title" id="title_1">this is</span> 
<span class="toggle" id="toggle_1>paragraph 1</span>

<span class ="title" id="title_2">this is</span> 
<span class="toggle" id="toggle_2">paragraph 2</span>

我尝试使用切换功能执行onlcick事件，因此基本上当用户点击title_1时，toggle_1将隐藏并显示，如果用户点击title_2，它将显示并隐藏toggle_2，我希望这是有道理的。

 (document).ready(function() {
      $('.toggle').hide();
        $('#title_').click(function() {
        $('#toggle_').toggle('slow');
    });
      });

我这样开始我的jquery，只是不知道该怎么做。感谢

Answer 1

这是一个简单的方法，

<强> HTML

<span class ="title" id="title_1">this is</span> 
<span class="toggle title_1">paragraph 1</span>

<span class ="title" id="title_2">this is</span> 
<span class="toggle title_2" id="toggle_2">paragraph 2</span>

<强>的jQuery

$(document).ready(function() {
      $('.toggle').hide();
        $('.title').click(function() {
       $('.'+ $(this).attr("id")).toggle('slow');
    });
      });

我没有测试代码。希望它能奏效。

Answer 2

你可以：

$('.toggle').hide();
$('.title').click(function() {
   $(this).next(".toggle").toggle('slow');
});

Answer 3

试试这个

(document).ready(function() {
      $('.toggle').hide();
      $('.title').click(function() {
                $(this).closest('.toggle').toggle('slow');
      });
});

在点击时获取jquery中元素的id？

3 个答案: