Question

我有一个名为.multi-col-icon-list的div。该div有两个孩子：

.text_col-1：其中包含图标
image_col-2：这是一个动态div。它将基于单击的图标显示信息。

在桌面上，图标显示在3x3网格中。但是，对于移动设备，我正在尝试将其转换为手风琴。

图片，描述了我希望它如何运行：

我的桌面工作正常，但该文本似乎未出现在移动设备下，我认为这是因为WordPress。

在下面的代码中，您将看到演示代码确实起作用。但是，在我的页面上，当我单击一个按钮时，它在display: block;标记上显示p，而不是将.accordionPanel更改为display: block;。

猜测p标签是从WordPress自动生成的，由于我不确定其他页面的编码方式，因此我不想进入并禁用它们。

话虽如此，JS专门声明将. accordionPanel更改为block，因此不确定为什么要更改p？

代码：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var accordionPanel = this.nextElementSibling;
    if (accordionPanel.style.display === "block") {
      accordionPanel.style.display = "none";
    } else {
      accordionPanel.style.display = "block";
    }
  });
}

img {
  height: 50px;
}
.text_col-1{
  display: flex;
  flex-direction:column;
}
.accordionPanel{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 3px solid #6BBDB9;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="two_col-container">
  <div class="text_col-1">
  
        <!-- ACCORDION -->
      <div class="accordion-wrapper">
      
        <!-- ELEMENT 1 -->
         <button class="accordion">
            <img src="https://img.icons8.com/metro/1600/1-circle.png">
             <h4>Section 1</h4>
         </button>
         <div class="accordionPanel">
           <p>text for icon 1</p>
         </div>
         
         <!-- ELEMENT 2 -->
         <button class="accordion">
           <img src="https://img.icons8.com/metro/1600/2-circle.png">
           <h4>Section 2</h4>
         </button>
         <div class="accordionPanel">
           <p>text for icon 2</p>
         </div>
         
         <!-- ELEMENT 3 -->
         <button class="accordion">
            <img src="https://img.icons8.com/metro/1600/2-circle.png">
            <h4>Section 3</h4>
         </button>
         <div class="accordionPanel">
           <p>text for icon 3</p>
         </div>
         <!-------------->
      </div>
  </div>
</div>

我的问题：

是否有解决方法？使.accordionPanel display: block而不是其他任何东西？
如何使按钮在首次出现时始终关闭？

Answer 1

以此为基础：

$( document ).ready(function() {
    $(".accordionPanel").css('display', 'none'); //hide all the accordions as the script loads
    $(".accordion").each( function() {
        $(this).on("click", function() {
            $(".accordion").removeClass("active");
            $(".accordionPanel").css('display', 'none');
            $(this).addClass("active");
            $(this).next(".accordionPanel").css('display','block');
        })
    })

});

img {
  height: 50px;
}
.text_col-1{
  display: flex;
  flex-direction:column;
}
.accordionPanel{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 3px solid #6BBDB9;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="two_col-container">
  <div class="text_col-1">
  
        <!-- ACCORDION -->
      <div class="accordion-wrapper">
      
        <!-- ELEMENT 1 -->
         <button class="accordion">
            <img src="https://img.icons8.com/metro/1600/1-circle.png">
             <h4>Section 1</h4>
         </button>
         <div class="accordionPanel">
           <p>text for icon 1</p>
         </div>
         
         <!-- ELEMENT 2 -->
         <button class="accordion">
           <img src="https://img.icons8.com/metro/1600/2-circle.png">
           <h4>Section 2</h4>
         </button>
         <div class="accordionPanel">
           <p>text for icon 2</p>
         </div>
         
         <!-- ELEMENT 3 -->
         <button class="accordion">
            <img src="https://img.icons8.com/metro/1600/3-circle.png">
            <h4>Section 3</h4>
         </button>
         <div class="accordionPanel">
           <p>text for icon 3</p>
         </div>
         <!-------------->
      </div>
  </div>
</div>

Answer 2

这里是没有Java脚本的手风琴：

html代码：

<body>
<!-- We will make a simple accordian with hover effects 
The markup will have a list with images and the titles-->
<div class="accordian">
    <ul>
        <li>
            <div class="image_title">
                <a href="#">KungFu Panda</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">Toy Story 2</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">Wall-E</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">Up</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
            </a>
        </li>
        <li>
            <div class="image_title">
                <a href="#">Cars 2</a>
            </div>
            <a href="#">
                <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
            </a>
        </li>
    </ul>
</div>

CSS代码：

/*Now the styles*/
* {
    margin: 0; 
    padding: 0;
}
body {
    background: #ccc; 
    font-family: arial, verdana, tahoma;
}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
    width: 805px; height: 320px;
    overflow: hidden;

    /*Time for some styling*/
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
    width: 2000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
}

.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;

    border-left: 1px solid #888;

    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

    /*Transitions to give animation effect*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    /*If you hover on the images now you should be able to 
    see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}


.accordian li img {
    display: block;
}

/*Image title styles*/
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0; bottom: 0; 
width: 640px;   

}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}

手风琴未显示下拉内容

2 个答案: