Question

我有一个像这样的一些li

<?php
   for($i=0; $i<5; i++) { 
      $id_name = "link" . $i;
      echo "<ul><a href='#' id=$id_name >list</a>
               <li class='on'>1</li>
               <li class='on'>2</li>
               <li class='on'>3</li>
            </ul> ";
    }
?>

和css：

.off{display:none;} .on{display:block;}

我希望每次点击链接都隐藏此链接的所有li元素。我尝试使用toggleClass()函数的jQuery，但我无能为力是因为我不知道链接的ID。我读了一些关于child()和parent()函数的内容。我可以用这种方式吗？（抱歉编程错误我是php的新手）

Answer 1

为什么不给链接标记一些类名作为示例myLink，如下面的代码：

echo "<ul><a href='#' id=$id_name class='myLink'>list</a>
           <li class='on'>1</li>
           <li class='on'>2</li>
           <li class='on'>3</li>
        </ul>

稍后在jquery中，您可以定位myLink类名和使用.siblings()，因为A标记是li元素的兄弟。因此无需.child()或.parent()。请参阅以下代码：

$(document).on('click', '.myLink', function () {
  $(this).siblings().toggleClass('off');
});

要考虑的一件事是，如果您在on元素上定义了li类名，那么使用toggleClass('off')只会添加和删除off类名，但不会添加on 1}}类名。要获得欲望结果，请使用此css：

.off {
  display:none !important;
}

DEMO

p / s：A代码不应该在那里，因为它不是UL的有效标记

Answer 2

尝试：

$('a').click(function(){
 $(this).parent().find('li').toggleClass('off');
});

或：

 $('a').click(function(){
     $(this).parent().children('li').toggleClass('off');
    });

或：

$('a').click(function(e){
  e.preventDefault();
     $(this).nextAll('li').toggleClass('off');
    });

Answer 3

如果您使用的是jquery，可以在html中添加一个函数。无需隐藏和显示类（除非您将动画或某些内容应用于您的css类）。如其他用户所述，您应该从列表中删除锚点并将其放在外面或作为列表项本身。

$(document).ready(function() {
  $('a').click(function() {
    $(this).parent().children('li').toggle();
  });
});

php隐藏动态构造的元素

3 个答案: