0

ユーザーがページの特定の領域を編集できる小さなアプリケーションを作成しようとしています (小さな 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>

私がやろうとしているのは、ゾーンをクリックするeditorと、特定の div が表示されること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();

      });

    });
});

ありがとう

4

1 に答える 1

0

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/

于 2013-02-15T09:58:07.953 に答える