4

当用户点击时MoreDiv HiddenDiv将显示，当再次点击或点击页面hiddenDivdiv的任何位置时，必须隐藏更多

这是我的CSS

.hiddenDiv {
  margin-left:505px;
  margin-top:25px;
  display:none;
  z-index:9876567890;
  position:absolute;
  width:100px;
  border:1px solid #CCC;
}
.hiddenDiv ul { 
  list-style:none;
  list-style-type:none;
  padding:0;
  margin:0;
}
.hiddenDiv ul li {
  padding:2px;
  cursor:pointer;
} .hiddenDiv ul li:hover {
  background-color:#4681C5;
}

这是我的 div

<div class="hiddenDiv">
  <ul>
    <li>Add favorites</li>
    <li>Give a Gift</li>
    <li>Block</li>
  </ul>
</div>

这是我的jQuery代码

$(document).ready(function() { 
  $('div.moreDiv').click(function() {
    $(".hiddenDiv").css('display', 'block');
  });
});
4

6 回答 6

4

使用切换方法显示和隐藏 div。

$(document).ready(function() {
    $('div.moreDiv').click(function() {
        $(".hiddenDiv").toggle() });
});​

http://jsfiddle.net/R7VRq/24/

于 2012-05-20T19:08:42.993 回答
2

使用show方法

当您单击更多链接时，将显示以下脚本，如果您单击窗口中的任意位置，则将其隐藏。

$(document).ready(function() {
   $(document).click(function() {        
    ShowHide();
   });

   $('div.moreDiv').click(function(e) {
      e.stopPropagation();
      ShowHide(true);
   });
});

function ShowHide(isFirstTime)
{
     var disp= $(".hiddenDiv").css("display");
     if((disp=="none")&&(isFirstTime))
     {                            
         $(".hiddenDiv").show()             
     }
     else
     {
          $(".hiddenDiv").hide()
     }        
}

工作样本：http: //jsfiddle.net/R7VRq/31/

于 2012-05-20T19:01:18.040 回答
1 
$(function() { 
    $('div.moreDiv').click(function() {
        if ($(this).hasClass('showing_hidden_div')) {
            $(this).removeClass('showing_hidden_div');
            $('.hiddenDiv').hide();
        } else {
            $(this).addClass('showing_hidden_div');
            $(".hiddenDiv").show();
        }
    });
});

应该这样做。

于 2012-05-20T19:06:00.927 回答
1

在这种情况下，DIV 的 id 为 DIV1，正如您在 javascript 中看到的那样。只需使用javascript，不需要jquery，无论如何这更容易。

<div class="moreDiv">More </div><div  id="DIV1" class="hiddenDiv"><ul><li>Add favorites</li><li>Give a Gift</li><li>Block</li></ul></div>

Javascript：

function ShowDIV(){
if (DIV1.style.display=="none") DIV1.style.display="block";
else DIV1.style.display="none";
}

Html 隐藏或显示 div：

<a href="#" onClick="ShowDIV();"><button>Show DIV</button></a>
于 2012-05-20T18:59:20.413 回答
1

jsBin 演示

  • 用于.toggle()切换“显示”状态。
  • 添加事件侦听器并使用.stopPropagation(). 这将防止单击事件被传递（冒泡）给您的元素祖先。
  • 添加一个if语句来检查body点击 - 查看弹出窗口是否可见 - 如果为真则隐藏它：

问：

  $('div.moreDiv').click(function(e){ // 'e' = event listener
       e.stopPropagation();    // event - stop propagation to body, parents.
       $(".hiddenDiv").toggle();   // toggle 'display' states             
  });
  
  $('body').click(function(){     
      if( $(".hiddenDiv").is(':visible') ){    // check if element is visible
          $(".hiddenDiv").hide();              // if true - hide it
      }
  });

http://api.jquery.com/event.stopPropagation/
http://api.jquery.com/visible-selector/

于 2012-05-20T19:05:11.950 回答
0

jquery 中有一个.hide()方法用于隐藏元素。使用bodyonclick 隐藏您的 div。

于 2012-05-20T18:59:37.917 回答