1

我的 php echo while 循环中的下拉 div 出现问题。

我正在尝试用 jquery 切换我的隐藏 div，但问题是 .next() 在每个循环中都没有得到隐藏的敌人。

我知道如何用 jquery 切换、隐藏和做一些其他的事情，但我只在 div 是特殊的或只有少数的时候才好。

我正在尝试使用 .(next) jquery 代码，它仅适用于简单的 div（一个在另一个旁边）......但是回显的 div 在其他 div 中有一些子 div，所以 .(next) 没有得到我隐藏的 div 和我什么都得不到！

我找到了一个使用简单 javascript 并触发 onClick 事件的解决方案，但我想将其更改回 jquery，以便可以在其上添加 .slideToggle("slow") 效果。

我尝试使用 .attr(OnClick) 获取属性，然后使用它来切换隐藏的目标 div，但它只是没有发生......！！！

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

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

这是我正在试验的 javascript 中的简单代码：该代码有 2 个回显循环，因此您知道它的原理和类似情况，因为我仅在记事本中使用它并对其进行快速样式化..您可以粘贴到记事本中并理解我的意思。通常我应该有 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>
4

2 回答 2

0

我注意到的第一个问题是您的包装器 div 具有相同的 ID。将此更改为 class="blockinfo"。也给你隐藏的 div 一个特定的类。

$(document).ready(function(){
  $('.blockinfo button').click(function() {
    $(this).next('.hidden').toggle();
  });
});
于 2011-04-01T00:55:06.393 回答
0

我真的认为我能给你的最好的建议是看看jQuery UI 手风琴，即使我认为它并不完全合适。您确实需要将样式分离到CSS中，并考虑使您的HTML 兼容

祝你好运

于 2011-04-01T00:55:18.370 回答