Question

我有以下代码，试图在我的网站上实现手风琴，但它不起作用 - 任何人都可以建议为什么（我的网页头部引用了js和css）？

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)

Answer 1

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链接以管理所选箭头。

Answer 2

试试这个plunker

<!DOCTYPE html>
<html>

<head>
    <script data-require="jquery@1.11.3" 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>

Jquery手风琴不显示点击内容

2 个答案: