Question

我遇到了来自我的php echo while循环中的dropdown div的问题。

我试图用jquery切换我隐藏的div，但问题是.next（）并没有得到每个循环隐藏的敌人。

我知道如何使用jquery来切换，隐藏和做其他一些事情，但是当div是特定的或仅仅是少数时我才会感觉良好。

我正在尝试。（下一个）jquery代码，它只适用于简单的div（一个在另一个旁边）...但是回显的div在其他内部有一些子div，所以。（next）不会让我隐藏div，我什么都没得到！

我找到了一个简单的javascript解决方案并触发onClick事件，但我想将其更改回jquery，以便我可以添加.slideToggle（“慢”）效果。

我已尝试使用.attr（OnClick）获取属性，然后使用它来切换目标div，这是隐藏的，但它不会发生...... !!!

我在问一个人是否可以为页面中的多重div提供一个永恒的解决方案... 而不是两个按钮隐藏/显示将其更改回一个按钮。

仅供参考： 1对于我回显的每个循环，子div为不同，以便jquery可以处理所需的div 2.我在PHP部分没有任何问题... 我搜索了很多地方，但我发现的唯一解决方案是.next（）

以下是我正在尝试的javascript中的简单代码：代码有2个回显循环，所以你知道它是如何和它这样的，因为我只在记事本中使用它并快速设置它..你可以粘贴在你的记事本中，明白我的意思.Normaly我应该有10个循环.. 。非常感谢:-)祝你有愉快的一天！

<html>
<head>
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.`enter code here`/jquery.min.js"></script>
<script type="text/javascript">

      function showHideContent(id, show)
      {
        var elem = document.getElementById(id);
        if (elem) 
        {
          if (show) 
          {
            elem.style.display = 'block';
            elem.style.visibility = 'visible';
          } 
          else
          {
            elem.style.display = 'none';
            elem.style.visibility = 'hidden';
          }
        }
      }          
</script></head><body>

      <div id='blockinfo'style="border:1px solid black; width:500px">

      <div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
      <span>some info</span><br>

      <div class='blockinfo1' style='  margin-top:-10px;'>

      <button style='border:1px solid black;   letter-spacing:1px; margin-left:100px;''
       onclick="showHideContent('hiddendiv1', false);">hide
      </button>

      <button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
       onclick="showHideContent('hiddendiv1', true);">show
      </button>
      </div>
       <br>

      <div id='hiddendiv1'style='background-color:black; display:none; width:500px; height:200px;'>
      <h1 style="color:white;"> more info </h1></div>



      <div id='blockinfo'style="border:1px solid black; width:500px">

      <div style='float:left;border:1px solid black;'width='70px'>Some Image</div>
      <span>some info</span><br>

      <div class='blockinfo2' style='  margin-top:-10px;'>

      <button style='border:1px solid black;   letter-spacing:1px; margin-left:100px;''
       onclick="showHideContent('hiddendiv2', false);">hide
      </button>

      <button style='border:1px solid black; letter-spacing:1px; margin-left:100px;'
       onclick="showHideContent('hiddendiv2', true);">show
      </button>
      </div>
       <br>

      <div id='hiddendiv2'style='background-color:black; display:none; width:500px; height:200px;'>
      <h1 style="color:white;"> more info </h1>
      </div>

</body><html>

Answer 1

我注意到的第一个问题是你的包装器div具有相同的ID。将其更改为class =“blockinfo”。同时也为隐藏的div提供特定的类。

$(document).ready(function(){
  $('.blockinfo button').click(function() {
    $(this).next('.hidden').toggle();
  });
});

Answer 2

我真的认为我能给你的最佳建议是看jQuery UI accordion即使我认为它不合适。您确实需要将样式分隔为CSS并查看制作HTML compliant

祝你好运

用于下拉div框的Jquery解决方案来自php而echo循环

2 个答案: