的 Demo

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>

我想点击显示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>向上滑动，然后将所需的function slide(div) { if ($(div).css('display') === 'none') { $('div').slideUp(500); $(div).delay(100).slideDown(500); } else { $(div).delay(100).slideUp(500); } return false; }向下滑动。

完整代码：

<强> JS

{{1}}

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 个答案:

的 Demo