手动创建手风琴

Question

我试图在不使用jQuery-UI库的情况下手动重新创建手风琴风格菜单。一切都工作正常，除非我点击打开一个盒子，它立即打开，没有任何过渡。我尝试通过添加一个名为open的类来显示隐藏每个框。我在每个动态内部生成数据，因此数据每次都会改变，每个数据内部的数据将完全不同。

“我不想让解决方案涉及到手风琴”[抱歉打字： - ）]

我在jsFiddle中设置了这个。有人可以看看这个。

https://jsfiddle.net/2nfd9utt/

有关示例代码的外观，请参阅下文。 这是我使用的HTML结构。

<ul class="prfaccordion">
   <li>
      <h3 class="prfaccDetailsHeader"> Committees </h3>
      <div class="prfaccDetails">
         <ul>
            <li> Sample Data 1 </li>
            <li> Sample Data 2 </li>
            <li> Sample Data 3 </li>
         </ul>
      </div>
   </li>
   <li>
      <h3 class="prfaccDetailsHeader"> Contributions </h3>
      <div class="prfaccDetails">
         <ul>
            <li> Sample Data 1 </li>
            <li> Sample Data 2 </li>
            <li> Sample Data 3 </li>
         </ul>
      </div>
   </li>
   <li>
      <h3 class="prfaccDetailsHeader"> Areas </h3>
      <div class="prfaccDetails">
         <ul>
            <li> Sample Data 1 </li>
            <li> Sample Data 2 </li>
            <li> Sample Data 3 </li>
         </ul>
      </div>
   </li>
</div>

这是风格，

.prfaccordion{
 width: 150px;   
}

.prfgrybox {
    background: #eeeeee;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
}

ul.prfaccordion li {
    list-style: none;
    margin: 0px 0px 2px 0px;
}

    ul.prfaccordion li h3 {
        background: #eeeeee url(images/downarr.png) no-repeat 95% 50%;
        padding: 6px 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        margin: 0px;
        color: #3a4f60;
        font-size: 15px;
    }

        ul.prfaccordion li h3.open {
            background: #eeeeee url(images/uparr.png) no-repeat 95% 50%;
            border-radius: 6px 6px 0px 0px;
            -moz-border-radius: 6px 6px 0px 0px;
            -webkit-border-radius: 6px 6px 0px 0px;
        }

    ul.prfaccordion li .prfaccDetails {
        background: #fbfbfb;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
           font-size: 13px;
        border-radius: 0px 0px 6px 6px;
        -moz-border-radius: 0px 0px 6px 6px;
        -webkit-border-radius: 0px 0px 6px 6px;
        color: #5787ad;
        display: none;
          transition:all ease .5s;
            -moz-transition:all ease .5s;
            -webkit-transition:all ease .5s;
    }

        ul.prfaccordion li .prfaccDetails ul li {
            padding: 5px 0px 5px 14px;
            position: relative;
            border-bottom: 1px solid #FFFFFF;
        }

            ul.prfaccordion li .prfaccDetails ul li a {
                font-size: 13px !important;
                color: #5787ad !important;
            }


            ul.prfaccordion li .prfaccDetails ul li:before {
                position: absolute;
                top: 9px;
                left: 0px;
                width: 8px;
                height: 8px;
                border-radius: 100%;
                -moz-border-radius: 100%;
                -webkit-border-radius: 100%;
                content: "";
                background: #b1c7cc;
            }

        ul.prfaccordion li .prfaccDetails.open {
            transition:all ease .5s;
            -moz-transition:all ease .5s;
            -webkit-transition:all ease .5s;
             display: block;
        }
}

这是脚本，

$(document).ready(function () {
            $(".prfaccDetailsHeader").click(function (event) {

                if ($(this).hasClass("open")) {
                    $('.prfaccDetailsHeader').removeClass("open");
                    $('.prfaccDetails').removeClass("open");
                    return false;
                }

                $('.prfaccDetailsHeader').each(function (i, obj) {
                    $(this).removeClass('open');
                });

                $('.prfaccDetails').each(function (event) {
                    $(this).removeClass('open');
                });

                $(this).addClass("open");
                $(this).parent().find('.prfaccDetails').addClass("open");
            });
        });

Answer 1

您可以使用jquerys toggle方法并将参数传递给slow。

.toggle("slow");

您的jquery代码将如下所示：

$(document).ready(function () {
    $(".prfaccDetailsHeader").click(function (event) {
        $('.prfaccDetailsHeader').each(function (i, obj) {
            $(this).removeClass('open');
        });
        $('.prfaccDetails').each(function (event) {
            $(this).removeClass('open');
        });
        $(this).parent().find('.prfaccDetails').toggle("slow");
    });
});

你可以删除你的一些CSS。例如过渡等。 Example Fiddle

我包括这个答案，因为OP没有明确表示他想要使用转换，只是他不想使用jquery-ui。

Answer 2

您无法在display: none;和display: block;之间制作动画。您可以通过添加display: none和max-height: 0px来隐藏元素，而不是使用overflow:hidden隐藏元素。

在打开元素的样式代码段中，您可以添加例如max-height: 1000px;（最大高度应该是元素允许的绝对最大高度）

注意：我选择为max-height设置动画而不仅仅是height的原因是因为如果css过渡是动态的（即高度设置为自动或100％）。这可以通过动画化元素的最大高度来解决。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".prfaccDetailsHeader").click(function(event) {

    if ($(this).hasClass("open")) {
      $('.prfaccDetailsHeader').removeClass("open");
      $('.prfaccDetails').removeClass("open");
      return false;
    }

    $('.prfaccDetailsHeader').each(function(i, obj) {
      $(this).removeClass('open');
    });

    $('.prfaccDetails').each(function(event) {
      $(this).removeClass('open');
    });

    $(this).addClass("open");
    $(this).parent().find('.prfaccDetails').addClass("open");
  });
});

＆＃13;

.prfaccordion {
  width: 150px;
}
.prfgrybox {
  background: #eeeeee;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 10px;
  margin: 0px 0px 10px 0px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  text-align: center;
}
ul.prfaccordion li {
  list-style: none;
  margin: 0px 0px 2px 0px;
}
ul.prfaccordion li h3 {
  background: #eeeeee url(images/downarr.png) no-repeat 95% 50%;
  padding: 6px 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  margin: 0px;
  color: #3a4f60;
  font-size: 15px;
}
ul.prfaccordion li h3.open {
  background: #eeeeee url(images/uparr.png) no-repeat 95% 50%;
  border-radius: 6px 6px 0px 0px;
  -moz-border-radius: 6px 6px 0px 0px;
  -webkit-border-radius: 6px 6px 0px 0px;
}
ul.prfaccordion li .prfaccDetails {
  background: #fbfbfb;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-size: 13px;
  border-radius: 0px 0px 6px 6px;
  -moz-border-radius: 0px 0px 6px 6px;
  -webkit-border-radius: 0px 0px 6px 6px;
  color: #5787ad;
  max-height: 0px;
  overflow: hidden;
  transition: all ease .5s;
  -moz-transition: all ease .5s;
  -webkit-transition: all ease .5s;
}
ul.prfaccordion li .prfaccDetails ul li {
  padding: 5px 0px 5px 14px;
  position: relative;
  border-bottom: 1px solid #FFFFFF;
}
ul.prfaccordion li .prfaccDetails ul li a {
  font-size: 13px !important;
  color: #5787ad !important;
}
ul.prfaccordion li .prfaccDetails ul li:before {
  position: absolute;
  top: 9px;
  left: 0px;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  content: "";
  background: #b1c7cc;
}
ul.prfaccordion li .prfaccDetails.open {
  max-height: 100px;
  transition: all ease .5s;
  -moz-transition: all ease .5s;
  -webkit-transition: all ease .5s;
  display: block;
}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="prfaccordion">
  <li>
    <h3 class="prfaccDetailsHeader"> Committees </h3>
    <div class="prfaccDetails">
      <ul>
        <li>Sample Data 1</li>
        <li>Sample Data 2</li>
        <li>Sample Data 3</li>
      </ul>
    </div>
  </li>
  <li>
    <h3 class="prfaccDetailsHeader"> Contributions </h3>
    <div class="prfaccDetails">
      <ul>
        <li>Sample Data 1</li>
        <li>Sample Data 2</li>
        <li>Sample Data 3</li>
      </ul>
    </div>
  </li>
  <li>
    <h3 class="prfaccDetailsHeader"> Areas </h3>
    <div class="prfaccDetails">
      <ul>
        <li>Sample Data 1</li>
        <li>Sample Data 2</li>
        <li>Sample Data 3</li>
      </ul>
    </div>
  </li>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我的回答与娜塔莉相似。但是，我无法让娜塔莉使用＆＃34;运行代码片段＆＃34;，因此我创建了jsfiddle。你想让手风琴滑动，所以你需要设置高度而不是显示块而不是。

.prfaccordion{
 width: 150px;   
}

.prfgrybox {
    background: #eeeeee;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    text-align: center;
}

ul.prfaccordion li {
    list-style: none;
    margin: 0px 0px 2px 0px;
}

    ul.prfaccordion li h3 {
        background: #eeeeee url(images/downarr.png) no-repeat 95% 50%;
        padding: 6px 10px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        margin: 0px;
        color: #3a4f60;
        font-size: 15px;
    }

        ul.prfaccordion li h3.open {
            background: #eeeeee url(images/uparr.png) no-repeat 95% 50%;
            border-radius: 6px 6px 0px 0px;
            -moz-border-radius: 6px 6px 0px 0px;
            -webkit-border-radius: 6px 6px 0px 0px;
        }

    ul.prfaccordion li .prfaccDetails {
        background: #fbfbfb;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
           font-size: 13px;
        border-radius: 0px 0px 6px 6px;
        -moz-border-radius: 0px 0px 6px 6px;
        -webkit-border-radius: 0px 0px 6px 6px;
        color: #5787ad;
        max-height:0; 
        overflow:hidden;
          transition:all .5s ease;
            -moz-transition:all .5s ease;
            -webkit-transition:all .5s ease;
    }

        ul.prfaccordion li .prfaccDetails ul li {
            padding: 5px 0px 5px 14px;
            position: relative;
            border-bottom: 1px solid #FFFFFF;
        }

            ul.prfaccordion li .prfaccDetails ul li a {
                font-size: 13px !important;
                color: #5787ad !important;
            }


            ul.prfaccordion li .prfaccDetails ul li:before {
                position: absolute;
                top: 9px;
                left: 0px;
                width: 8px;
                height: 8px;
                border-radius: 100%;
                -moz-border-radius: 100%;
                -webkit-border-radius: 100%;
                content: "";
                background: #b1c7cc;
            }

        ul.prfaccordion li .prfaccDetails.open {
            transition:all .5s ease;
            -moz-transition:all .5s ease;
            -webkit-transition:all .5s ease;
            max-height:100px;
        }
}

（在我注意到娜塔莉的回答之前，我写过这篇文章，所以我想我会把它发布到anwyway）

Answer 4

您可以参考这个简单的代码来使您的工作。

＆＃13;

＆＃13;

$('.prfaccordion').find('h3').on('click',function(){    	
        var _target = $(this).parent().find('> div');
        if($(_target).is(':visible')){
            $(_target).slideUp(500);
        }
        else {
            $(_target).slideDown(500);
        }
    });

＆＃13;

.prfaccordion {
    display: inline-block;
    width: 40%;
    list-style: none;
}
.prfaccordion li {
    float: left;
    width: 100%; 
}
.prfaccordion li > h3 {
    background: #eee;
    display: inline-block;
    width: 100%;
    margin: 5px 0;
    padding: 5px;
}
.prfaccordion li > div {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="prfaccordion">
   <li>
      <h3> Committees </h3>
      <div>
         <ul>
            <li> Sample Data 1 </li>
            <li> Sample Data 2 </li>
            <li> Sample Data 3 </li>
         </ul>
      </div>
   </li>
   <li>
      <h3> Committees 123 </h3>
      <div>
         <ul>
            <li> Sample Data 1 </li>
            <li> Sample Data 2 </li>
            <li> Sample Data 3 </li>
         </ul>
      </div>
   </li>
</ul>

＆＃13;

＆＃13;

＆＃13;