Question

我创建了CSS：

.nav{
    right: 0px;
    left: 0px;
    margin-top: 0px;
    margin-bottom:20px;
    height: 35px;
    text-align: center;
    background-color: red;
    z-index: 1;
}

.sticky {

background: #000;
text-align: center;
margin: 0 auto;
position: fixed;
z-index: 9999;
border-top: 0;
top: 0px;
font-size: 17px;
box-shadow: 0px 0px 3px 0px #949494;
background: #10b5fa;
padding-top: 6px;

} 
.accordion-section-title {

width:100%;
padding:10px;
display:inline-block;
border-bottom:1px solid #1a1a1a;
background:#333;
transition:all linear 0.15s;
/* Type */
font-size:1.200em;
text-shadow:0px 1px 0px #1a1a1a;
color:#fff;
text-decoration: none;
}

.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    /* Type */
    text-decoration:none;
}



/*----- Section Content -----*/
.accordion-section-content {
    padding:10px;
    display:none;
}

我的JavaScript

jQuery(document).ready(function() {
function close_accordion_section() {
    jQuery('.accordion .accordion-section-title').removeClass('active');
    jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}

jQuery('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');

    if(jQuery(e.target).is('.active')) {
        close_accordion_section();
    }else {
        close_accordion_section();

        // Add active class to section title
        jQuery(this).addClass('active');
        // Open up the hidden content panel
        jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
    }

    e.preventDefault();
});
});

我的HTML：

<nav class="nav sticky">

            <a class=".accordion-section-title" href="#tujuan"> Kategori</a>
            <div id="tujuan" class="accordion-section-content">
                <p>Hello World</p>
            </div>

        </nav>

我的问题是为什么id＆＃34; tujuan＆＃34;没有显示手风琴的工作？这是我学到的资料来源：http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/

谢谢

Answer 1

只需查看代码，行<a class=".accordion-section-title" href="#tujuan"> Kategori</a>即可删除“.accordion”前面的句号。

要成功： - ＆gt; <a class="accordion-section-title" href="#tujuan"> Kategori</a>

您将类称为“.something”的唯一时间是在HTML之外调用它。像CSS或JS一样，否则只需正常输入类。

如果你创建一个jsfiddle，我可以深入研究它。否则，祝你好运，编码愉快!!

CB

Answer 2

你遗漏了一些HTML而你没有使用你的jQuery函数调用任何东西：当你使用.accordion类时，它被设置为.nav。

参见示例。

jQuery(document).ready(function() {
  function close_accordion_section() {
    jQuery('.nav .accordion-section-title').removeClass('active');
    jQuery('.nav .accordion-section-content').slideUp(300).removeClass('open');
  }

  jQuery('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = jQuery(this).attr('href');

    if (jQuery(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      jQuery(this).addClass('active');
      // Open up the hidden content panel
      jQuery('.nav ' + currentAttrValue).slideDown(300).addClass('open');
    }

    e.preventDefault();
  });
});

.nav {

  right: 0px;

  left: 0px;

  margin-top: 0px;

  margin-bottom: 20px;

  height: 35px;

  text-align: center;

  background-color: red;

  z-index: 1;

}

.sticky {

  background: #000;

  text-align: center;

  margin: 0 auto;

  position: fixed;

  z-index: 9999;

  border-top: 0;

  top: 0px;

  font-size: 17px;

  box-shadow: 0px 0px 3px 0px #949494;

  background: #10b5fa;

  padding-top: 6px;

}

.accordion-section-title {

  width: 100%;

  padding: 10px;

  display: inline-block;

  border-bottom: 1px solid #1a1a1a;

  background: #333;

  transition: all linear 0.15s;

  /* Type */

  font-size: 1.200em;

  text-shadow: 0px 1px 0px #1a1a1a;

  color: #fff;

  text-decoration: none;

}

.accordion-section-title.active,

.accordion-section-title:hover {

  background: #4c4c4c;

  /* Type */

  text-decoration: none;

}

/*----- Section Content -----*/

.accordion-section-content {

  padding: 10px;

  display: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav class="nav sticky">
  <div class="accordion-section"><a class="accordion-section-title" href="#tujuan"> Kategori</a>

    <div id="tujuan" class="accordion-section-content">
      <p>Hello World</p>
    </div>
  </div>
</nav>

折叠导航栏不适用于HTML，CSS和JavaScript

2 个答案: