Question

我在while循环中从数据库中提取数据。一个项目包括迷你导航，数据库项目，与菜单相关的隐藏div。当您单击此菜单中的项目时，我希望div从数据库项下方滑出。

所以

while($row = mnysql_fetch_array($q)){
   <li>
    row data
    hidden divs
   </li>
   menu
}

<script>
slidetoggle script here
</script>

我的问题是我的jquery功能。它只选择兄弟姐妹。我需要李的菜单。那么如何从菜单上方的列表项中选择一个隐藏的div。

$(document).ready(function(){
    //Slide toggle for buttons
    $('.toggle-trigger').click(function(){
    $(this).next('.toggle').slideToggle();
  });
 });

                    `
<ul class="comment-links">
<li id="com-link">
    <a href="#" title="View Comments" class="view-comments toggle-trigger">View Comments</a>
    <div class="comments toggle">
        <p>bla bla</p>
    </div>
</li>
<li id="add-com-btn">
    <a href="#" title="Add a comment" class="add-comment-btn toggle-trigger">Add a comment</a>
    <div class="add-comment-form toggle">
        add comment form
    </div><!--end add comment form-->
</li>
<li id="down-btn">
    <a href="uploads/Test document.pdf" title="Download Document" target="_blank" class="dwnld-doc-btn-2">Download Document</a>
</li>

Answer 1

如果你可以给他们一个共享的父母，最好使用像这样的纯JavaScript：

尝试使用find方法仅搜索子节点。对于每个li，我们可以在li中找到.toggle-trigger和.toggle元素，并为每个元素添加单独的事件

$('li').each(function(){
  var node = this;
  node.find('.toggle-trigger').click(function(){
    $(node).find('.toggle');
  });
});

http://api.jquery.com/find/

Answer 2

如果您不能将相关项目作为共享父项，则必须为其提供唯一ID。

每个触发器使用在php $row.id中生成的id与隐藏的div相关联，使用自定义属性data-id存储id。然后jquery使用此id来选择正确的元素。例如toggle-3

<?php while($row = mnysql_fetch_array($q)){ ?>
            <div class=".toggle" id="toggle-<?php $row.id?>">
<?php }
      while($row = mnysql_fetch_array($q)){ ?>
            <div class=".toggle-trigger" data-id="<?php $row.id?>">
<?php } ?>

在Javascript中

$('.toggle-trigger').click(function(){
    var toggleId= 'togle-' + this.get('data-id');
    $('#'+ toggleId).slideToggle()
  });

jQuery Slide切换下一堂课而不是下一堂兄弟

2 个答案: