Question

我想在点击它时显示和隐藏div，这没关系，但如果以前用户打开其他用户之一，我有问题找到解决其他问题的解决方案。

第二张图片显示当我点击另一个div时附加的内容：

如果我想关闭，我必须点击每个打开的div ...

那是我的javascript代码：

       function toggle_visibility(id) {
           var e = document.getElementById(id);
           var el = document.getElementById('matdidcor');
           if(e.style.display == 'block') {
              e.style.display = 'none';
              el.style.height = 0 + 'px';
          } else {
              e.style.display = 'block';
              el.style.height = 420 + 'px';
          }
       }

这是HTML

    <section id="slidefeature" class="greenBack">
      <div class="container-fluid"> 
        <div class="row">

          <div class="col-md-4" id="slidefeatures"> 
            <!--======= FEATURE =========-->
            <ul class="row">
              <!--======= SERVICES 1 =========-->
                <a onclick="toggle_visibility('DIDATICA');" class="DIDATICA">          
             <li>
                <div class="text-center" style="color: #FFF !important;">
                    <i class="fa fa-pencil-square-o fa-3x"></i> 
                </div>             
                <div class="top text-center pad20">
                  <h5>DIDATICA</h5>
                  <hr>
                  </div>
              </li>
              </a>
                </ul>
            </div>        

          <div class="col-md-4" id="slidefeatures"> 
            <!--======= FEATURE =========-->
            <ul class="row">
              <!--======= SERVICES 1 =========-->
                <a onclick="toggle_visibility('MATERIAL');" class="MATERIAL">          
             <li>
                <div class="text-center" style="color: #FFF !important;">
                    <i class="fa fa-book fa-3x"></i> 
                </div>             
                <div class="top text-center pad20">
                  <h5>MATERIAL</h5>
                  <hr>
                  </div>
              </li>
              </a>
                </ul>
            </div>        

          <div class="col-md-4" id="slidefeatures"> 
            <!--======= FEATURE =========-->
            <ul class="row">
              <!--======= SERVICES 1 =========-->
                <a onclick="toggle_visibility('CURSOS');" class="CURSOS">          
             <li>
                <div class="text-center" style="color: #FFF !important;">
                    <i class="fa fa-copy fa-3x"></i> 
                </div>             
                <div class="top text-center pad20">
                  <h5>CURSOS</h5>
                  <hr>
                  </div>
              </li>
              </a>
                </ul>
            </div>        
                    </div>
      </div>     
    </section>

    <div id="matdidcor" style="height: 420px;">
<div class="pad20">
  <ul>
            <li class="col-sm-12 pad20" style="display: block;" id="DIDATICA"> 
        <div class="col-sm-4"><img src="wp-content/uploads/2015/03/news-img.jpg" alt=""></div>
      <div class="col-sm-8">
        <div class="text-left">
                  <h3>DIDATICA</h3>
                          <p>sample text</p>
                  <div class="row"> 
                        </div>
      </div>
    </div></li>
                <li class="col-sm-12 pad20" style="display:none" id="MATERIAL"> 
        <div class="col-sm-4"><img src="wp-content/uploads/2015/03/news-img.jpg" alt=""></div>
      <div class="col-sm-8">
        <div class="text-left">
                  <h3>MATERIAL</h3>
                          <p>sample text</p>
                  <div class="row"> 
                        </div>
      </div>
    </div></li>
                <li class="col-sm-12 pad20" style="display:none" id="CURSOS"> 
        <div class="col-sm-4"><img src="wp-content/uploads/2015/03/news-img.jpg" alt=""></div>
      <div class="col-sm-8">
        <div class="text-left">
                  <h3>CURSOS</h3>
                          <p>sample text</p>
                  <div class="row"> 
                        </div>
      </div>
    </div></li>

  </ul>
</div>
</div>

有任何改进的想法吗？提前谢谢。

显示和隐藏多个动态div

0 个答案: