單擊另一個時隱藏div

Question

這是我的代碼：

<script type='text/javascript'>


        var slide = function (div) {
            if ($(div).css('display') === 'none') {
                $(div).delay(100).slideDown(500);
                return false;
            } else {
                $(div).delay(100).slideUp(500);
                return false;
            }
        }
         //]]>
    </script>


Css:


  #cips,
        #briketi,
        #pelet {
            background-color: cyan;
            position: absolute;
            top: 30px;
            height: 150px;
            width: 300px;
        }

      <a href="#" onclick="slide('#cips');">Cips</a>
    <a href="#" onclick="slide('#pelet');">Pelet</a>
    <a href="#" onclick="slide('#briketi');">Pilana</a>
    <div id="proizvodi">
        <div id="cips" style="display: none">
            Resurs centar</br>
            Cefix
        </div>
        <div id="briketi" style="display: none">
            Proba
        </div>
        <div id="pelet" style="display: none">
            Udruzenje sumovlasnika
        </div>
    </div>

我想onclick顯示div，但是單擊另一個時隱藏。 有人有解決方案嗎？

提前致謝！

Answer 1

您可以使用Jquery。

$（DIV）.show（）; 或$（div）.hide（）;

一個例子

$(document).ready(function(){
  $("div").click(function(){
     $("div2").hide();
     $("div3").show();
  });
});

沒關系？

Answer 2

在if（單擊隱藏的對象）的第一子句中，可以在開頭添加以下內容：

$('div').slideUp(500);

這將使所有<div>向上滑動，然后將所需的向下滑動。

完整代碼：

JS

function slide(div) {
    if ($(div).css('display') === 'none') {
        $('div').slideUp(500);
        $(div).delay(100).slideDown(500);
     } else {
        $(div).delay(100).slideUp(500);
    }
    return false;
}

Answer 3

HTML

<body> <a href="#" id="link">link</a>
    <div id="showHideDiv" class="hide">hello!</div>
</body>

JAVASCRIPT

$(document).ready(function () {
    jQuery('#link').click(function (e) {
        e.preventDefault();
        if (jQuery('#showHideDiv').hasClass('hide')) {
            jQuery('#showHideDiv').removeClass('hide');
            jQuery('#link').css('color', 'red');
        } else {
            jQuery('#showHideDiv').addClass('hide');
            jQuery('#link').css('color', 'blue');
        }
    });
});

單擊另一個時隱藏div

問題描述

3 個解決方案

解決方案1
1 2014-01-13 11:04:51

解決方案2
0 2014-01-13 11:06:43

解決方案3
0 2014-01-13 11:08:28

演示

單擊另一個時隱藏div

問題描述

3 個解決方案

解決方案1 1 2014-01-13 11:04:51

解決方案2 0 2014-01-13 11:06:43

解決方案3 0 2014-01-13 11:08:28

演示

解決方案1
1 2014-01-13 11:04:51

解決方案2
0 2014-01-13 11:06:43

解決方案3
0 2014-01-13 11:08:28