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

它不是if条件，你在哪里检查里面去 - ！$ 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手风琴没有在点击上显示内容

回答

相关问题