Javascript隐藏并显示内容

时间:2011-08-26 17:09:44

标签: javascript css javascript-events

我正在寻找一个纯粹的CSS答案来隐藏和显示内容但是没有运气后我一直在玩一段javascript代码。我的问题在代码下方,因为它可能会帮助您首先查看代码。

      <script type="text/javascript">
    $(document).ready(function(){
            $('.text_container').addClass("visible");

        $('.text_container').click(function() {
            var $this = $(this);
            if ($this.hasClass("visible")) {
                    $(this).removeClass("visible").addClass("hidden");
            } else {
                    $(this).removeClass("hidden").addClass("visible");
            }
        });
    });
   </script>  


        <div id="services" class="text_container"> 
         <h4>SERVICES</h4>
             <div>
              <p>Loads of text blah blah blah</p>
             </div>
         </div>


         /* HIDE and SHOW content javascript function */
  .hidden div {display:none;}
  .visible div {display:block;} 

  .text_container {
      background-color: #39b54a;
     background-image: url("pattern2.png");
     border: 1px solid #777777;
    box-shadow: 0 1px 1px  inset, 0 0 40px rgba(0, 0, 0, 0.5) inset, 0 16px 0 rgba(255, 255, 255, 0.4) inset, 0 4px 5px rgba(0, 0, 0, 0.6);
    color: #000000;
    padding: 5px;
    text-align: left;
    width: auto;

  }
  .text_container h4 {
     cursor: pointer;
  }
  .text_container div p {
      margin-bottom: 10px;
  }
  .visible > div {
   display: block;
   font-size: 17px;
    height: 100%;
  }

  #rating > div {
    clear: left;
    height: 260px;
  }
  /* end of HIDE and SHOW content javascript function */  

目前正如预期的那样,具有class = text_container区域的div是可点击的,因此如果在您选择内容隐藏的表单时将表单放在子DIV中。我想只制作H4元素 可点击以便点击显示的内容不会隐藏内容。

我在javascript上没用,我想这需要重新调整js。 感谢

6 个答案:

答案 0 :(得分:1)

您可以使用:

$('.text_container h4').click(function() {
    if($(this).hasClass("visible")) {
        $(this).removeClass("visible").addClass("hidden");
    } else {
        $(this).removeClass("hidden").addClass("visible");
    }
});

$(''')中的内容就像一个CSS选择器,所以如果你知道CSS那么它对你来说不会有问题。

使用CSS,您可以使用:

设置h4元素的样式
.text_container h4 { color: #000000; }

同样,您可以使用jQuery创建一个包装集,并使用:

选择它
$('.text_container h4')

答案 1 :(得分:1)

这将实现您的目标,example

$(document).ready(function() {
    $('.text_container h4').addClass("visible");

    $('.text_container h4').click(function() {
        var $this = $(this).parent();
        if ($this.hasClass("visible")) {
            $this.removeClass("visible").addClass("hidden");
        } else {
            $this.removeClass("hidden").addClass("visible");
        }
    });
});

我们正在选择H4并向其添加click事件,然后使用.parent()访问父DIV。

答案 2 :(得分:0)

$('.text_container')...替换为$('.text_container h4')...,或者更好的是$('h4')....,如果它是页面上唯一的H4元素。

答案 3 :(得分:0)

改变这个:

      $('.text_container').click(function() {

到此:

      $('.text_container h4').click(function() {

答案 4 :(得分:0)

只需替换为

$('.text_container h4').click( ...

答案 5 :(得分:-1)

我不确定某人是否可以点击display: none的元素。另外,替换这个:

if ($this.hasClass("visible")) {
    $(this).removeClass("visible").addClass("hidden");
} else {
    $(this).removeClass("hidden").addClass("visible");
}

有了这个:

$(this).toggle();

完整代码:

$(function() {
    $('.text_container h4').click(function() {
        $(this).parent().toggle(); // toggles between visible and hidden
    });
});