jquery - jQuery 基于所选项目打开/关闭 div

Question

我正在尝试创建一个小型应用程序，人们可以在页面上编辑特定区域（如小型 CMS）

我有以下 HTML

<div class="main">
   <div class="zone">
     <div class="editor">
       <ul>
        <li>Bold</li>
        <li>Italic</li>
       </ul>
     </div>
     <div class="content">Some Content</div>
   </div>

   <div class="zone">
     <div class="editor">
       <ul>
        <li>Bold</li>
        <li>Italic</li>
       </ul>
     </div>
     <div class="content">Some More Content</div>
   </div>

</div>

我想要做的是，如果我点击一个区域，那么editordiv 会显示为特定的zone. 然后所有其他人必须关闭（因为我没有编辑该区域）

jQuery：

jQuery(document).ready(function(){

  jQuery().find('div.editor').hide();
  jQuery(".main").selectable({
         filter: 'div:not(.content)'
  });

    jQuery(".zone").each(function() {

      jQuery(this).find(".content").click(function(e) { 
        var parent = jQuery(this).parent().parent();

        var selected = parent.find('div.zone.ui-selected');

        selected.find('div.editor').show();

      });

    });
});

谢谢

Answer 1

您的 hide() 函数只执行一次 - 在页面加载后的 domready 上。

你必须在你的点击函数中移动你的隐藏代码

 jQuery(this).find(".content").click(function(e) {
    jQuery().find('div.editor').hide();
    var parent = jQuery(this).parent().parent();

    var selected = parent.find('div.zone.ui-selected');

E：如前所述，您必须在单击事件中添加 hide()。

$('div.editor').hide();

此外，您不应该使用 js 来最初隐藏内容。使用 CSS display:none 来防止在页面加载时显示/隐藏。看这里：

http://jsfiddle.net/aAvC5/4/