JQuery аккордеон, не отображающий содержимое по клику

У меня есть следующий код, в попытке добиться гармонии на моем сайте, однако он не работает - кто-нибудь может посоветовать, почему (как js, так и css ссылаются в глава моей веб-страницы)?JQuery аккордеон, не отображающий содержимое по клику

HTML:

<dl class="accordion"> 
    <dt>Answer 1</dt> 
    <dd>Details of the answer go here...</dd> 
    </dl> 
    <dl class="accordion"> 
    <dt>Answer 2</dt> 
    <dd>Details of the answer go here...</dd> 
    </dl>

CSS:

.accordion { margin: 0 0 30px; border-top: 1px solid #DDD; border-right: 1px solid #DDD; border-left: 1px solid #DDD; 
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } 

    .accordion dt { border-bottom: 1px solid #DDD; } 

    .accordion dd { display: none; padding: 20px; border-bottom: 1px solid #DDD; } 

    .accordion dt { cursor: pointer; padding: 8px 15px; margin: 0; } 

    .accordion dt:before { content: "\25B6"; padding-right: 5px; } 

    .accordion dt.accordion-active:before { content: "\25BE"; padding-right: 5px; } 

    .accordion dt.accordion-active:hover { cursor: default; }

JS:

(function($) { 
    //Hide all panels 
    var allPanels = $('.accordion > dd').hide(); 
    //Show first panel 
    $('.accordion > dd:first-of-type').show(); 
    //Add active class to first panel 
    $('.accordion > dt:first-of-type').addClass('accordion-active'); 
    //Handle click function 
    jQuery('.accordion > dt').on('click', function() { 
     //this clicked panel 
     $this = $(this); 
    //the target panel content 
     $target = $this.next(); 

     //Only toggle non-displayed 
     if(!$this.hasClass('accordion-active')){ 
      //slide up any open panels and remove active class 
      $this.parent().children('dd').slideUp(); 

      //remove any active class 
     jQuery('.accordion > dt').removeClass('accordion-active'); 
      //add active class 
      $this.addClass('accordion-active'); 
      //slide down target panel 
     $target.addClass('active').slideDown(); 

     } 

    return false; 
}); 

})(jQuery)

;

источник

2015-11-02 YorkieMagento

Это не происходит внутри, если условия, где вы проверяете - $ this.hasClass («гармошка-активный») –

jQuery(function() { 
    //Hide all panels 
    var allPanels = $('.accordion > dd').hide(); 

    jQuery('.accordion > dt').on('click', function() { 
    $this = $(this); 
    //the target panel content 
    $target = $this.next(); 

    if ($target.hasClass("in")) { 
     $target.slideUp(); 
     $target.removeClass("in"); 
    } else { 
     jQuery('.accordion > dd').removeClass("in"); 
     $target.addClass("in"); 

     jQuery('.accordion > dd').slideUp(); 
     $target.slideDown(); 
    } 
    }) 
})

Добавление plunker ссылки управлять выбранной стрелкой.

источник

2015-11-02 11:17:04

Добавлен plunker для управления стрелкой для активного plunker :) Хороший код! –

Спасибо за ответ - можно ли это использовать в файле .js? Или он должен быть включен в тело страницы. В настоящее время у меня добавлено «accordion.js», и оно все еще не работает ... – YorkieMagento

Это должно быть внутри тега скрипта в теле или может быть непосредственно добавлено в JS-файл (обязательно добавьте ссылку на этот JS-файл в своем HTML). Можете ли вы рассказать о том, что не работает, и есть ли какие-либо ошибки в консоли? –

Попробуйте plunker

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 

    <style> 
     .accordion { 
      margin: 0 0 30px; 
      border-top: 1px solid #DDD; 
      border-right: 1px solid #DDD; 
      border-left: 1px solid #DDD; 
      -webkit-border-radius: 4px; 
      -moz-border-radius: 4px; 
      border-radius: 4px; 
     } 

     .accordion dt { 
      border-bottom: 1px solid #DDD; 
     } 

     .accordion dd { 
      display: none; 
      padding: 20px; 
      border-bottom: 1px solid #DDD; 
     } 

     .accordion dt { 
      cursor: pointer; 
      padding: 8px 15px; 
      margin: 0; 
     } 

     .accordion dt:before { 
      content: "\25B6"; 
      padding-right: 5px; 
     } 

     .accordion dt.accordion-active:before { 
      content: "\25BE"; 
      padding-right: 5px; 
     } 

     .accordion dt.accordion-active:hover { 
      cursor: default; 
     } 
    </style> 
</head> 

<body> 
    <dl class="accordion"> 
     <dt>Answer 1</dt> 
     <dd>Details of the answer go here...</dd> 
    </dl> 
    <dl class="accordion"> 
     <dt>Answer 2</dt> 
     <dd>Details of the answer go here...</dd> 
    </dl> 

    <script> 
     (function($) { 
      //Hide all panels 
      var allPanels = $('.accordion > dd').hide(); 
      //Show first panel 
      // commenting this 
      // $('.accordion > dd:first-of-type').show(); 
      //Add active class to first panel 
      // $('.accordion > dt:first-of-type').addClass('accordion-active'); 
      //Handle click function 
      jQuery('.accordion > dt').on('click', function() { 
       //this clicked panel 
       $this = $(this); 
       //the target panel content 
       $target = $this.next(); 

       //Only toggle non-displayed 
       if (!$this.hasClass('accordion-active')) { 
        // hide all dd's 
        $('.accordion > dd').hide(); 
        //slide up any open panels and remove active class 
        $this.parent().children('dd').slideUp(); 

        //remove any active class 
        jQuery('.accordion > dt').removeClass('accordion-active'); 
        //add active class 
        $this.addClass('accordion-active'); 
        //slide down target panel 
        $target.addClass('active').slideDown(); 

       } 

       return false; 
      }); 

     })(jQuery) 
    </script> 
</body> 

</html>

источник

2015-11-02 11:22:54

JQuery аккордеон, не отображающий содержимое по клику

ответ

Смежные вопросы