2013-08-28 7 views
0

Я использую следующий скрипт, чтобы показать другой фон в зависимости от состояния div.Jquery click only work once on toggle

Когда он не расширен, он показывает знак «плюс (+)», а при его расширении он не имеет фонового изображения (ничего не показывает).

Проблема в том, что работает только один раз, и я не знаю почему.

Вот код:

EDIT (добавлен HTML)!

HTML:

<body> 
    <section> 
     <div class="wrapper wf"> 
      <ul id="Parks" class="just"> 
<!--------------- PRODUCT --> 
       <li class="mix" href="#therapy_vital" > 
       <div class="meta name"> 
         <div class="img_wrapper"> 
          <img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/> 
         </div> 
         <div class="titles"> 
          <h2>TITLE</h2> 
         </div> 
        </div> 
        <!-- Expand --> 
        <div href="#therapy_vital" class="nav-toggle"></div> 
        <div id="therapy_vital" style="display:none"> 
       <article class="ac-small"> 
       SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br> 
       </article> 
       </div> 
       </li> 
<!--------------- PRODUCT --> 
       <li class="mix" href="#therapy_natur" > 
       <div class="meta name"> 
         <div class="img_wrapper"> 
          <img src="images/spa/masaje/.jpg" onload="imgLoaded(this)"/> 
         </div> 
         <div class="titles"> 
          <h2>TITLE</h2> 
         </div> 
        </div> 
        <!-- Expand --> 
        <div href="#therapy_natur" class="nav-toggle"></div> 
        <div id="therapy_natur" style="display:none"> 
       <article class="ac-small"> 
       SUBCONTENT<br><br><br><br><br><br><br><br><br><br><br><br> 
       </article> 
       </div> 
          </li> 
</ul> 
</div>      
     </section> 
    </body> 

JS:

$(document).ready(function() { 
    $('.meta').click(function() { 
     $(this).css('background', 'none'); 
    }); 
    $('.mix').click(function() { 
     var collapse_content_selector = $(this).attr('href'); 
     var toggle = $(this); 
     $('.meta').click(function() { 
      $(this).css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent'); 
     }); 
     $(collapse_content_selector).toggle(function() {}); 
    }); 
}); 

(Значение .mix делает Div расширяется, а класс переключиться на другой фон .meta).

Любой ключ?

EDIT2 (Live пример)

http://anubisfiles.com/test/test.html

(Due Я не очень знаком с jsFiddle, я предпочитаю, чтобы показать вам, что это размещается на веб-сайте).

Спасибо!

+6

создать скрипку или отправить вам HTML тоже – SarathSprakash

+1

у вас есть два поручения нажмите на .meta, один при загрузке документа и один, если щелкнуть .mix. Если .meta находится внутри .mix или наоборот, вы можете отменить событие барботажа с помощью e.stopPropagation() – mplungjan

+0

Live Пример добавлен –

ответ

0

Использование на функцию, чтобы связать события,

$('element').on('click', function() { 

}); 
+0

.click/.on работает то же самое – mplungjan

+0

Нет. Совсем нет. Для динамических привязок лучше использовать «on». –

+0

работает так же, если объект существует во время привязки. Да, вы можете сэкономить свое горе ВСЕГДА, используя .on, но я сомневаюсь, что это проблема в этом случае. – mplungjan

0
$('.mix').click(function() { 
     var collapse_content_selector = $(this).attr('href'); 
     var toggle = $(this); 

     $(this).find('.meta').css('background', 'url(images/arrow_down.png) no-repeat scroll 95% 97% transparent'); 
     $(collapse_content_selector).toggle(function() {}); 
    }); 

Попробуйте

+0

Я не уверен в этом. нужно также увидеть ваш html. –

+0

Не работает, показывая знак «Плюс (+)», пока он расширен или нет. –