Question

我已经使用Jquery切换阅读了此站点上的所有先前答案，但我没有看到我的解决方案。欣赏某人对此的看法。我们在这里需要的只是在选择#pulldown_tab时按需显示副本。尽管在w3 Jquery站点和侧面测试中看起来非常努力，但我还是错了。

<html>
<head>
<script> 
$(document).ready(function(){
$("section_content_wrapper""pulldown_tab").click(function(){
$("section_content_wrapper" "cream_of_the_craft").slideToggle("slow");
  });
});
</script>


<div id="main"><!-- Start Main Area -->
<div class="navigation_container"><!-- navigation -->
<ul class="menu">
        <li><a href="#">About</a></li>          
        <li><a href="#">Articles</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
</ul>
</div><!-- END navigation --> 

<div class="pppd_logo">
</div><!-- END logo -->

<div class="section_content_wrapper"><!-- Start Section 1 Cream_of_the_Craft -->
<h1>This is the Headline</h1>
    <div id="pulldown_tab"></div>
    <div id="cream_of_the_craft"> <!--section content-->
    This is the copy to revealed.</div><!--section content-->
        </div><!-- END Section 1 Cream_of_the_Craft -->
</div><!-- End Main Area -->


.section_content_wrapper
{
position:       absolute;
width:          46%;
height:         200px;
margin-top:     15%;
margin-right:   auto;
margin-left:    39%;
z-index:        0;
}

h1
{
position:   relative;
margin-bottom:  .8em;
font-family: 'EB Garamond', serif;
font-weight:    400;
font-size:  2em;
padding-left:   0.1em;
padding-right:  0.1em;
padding-bottom: 0;
color:  black;
text-align: center;
border-bottom-style:solid;
border-width:   1px;
border-color:   black;
z-index:    0;
}

#cream_of_the_craft
{
position:       absolute;
margin-top:     -25px;
padding-top:    4em;
padding-left:   1em;
padding-right:  1em;
padding-bottom: 1em;
font-family:    'Istok Web', sans-serif;
font-size:      1em;
color:          black;
background-color: #FFFFFF;
opacity:    .5;
z-index:    0;
display: none;
}


#pulldown_tab
{
position:       absolute;
height:48px;
width: 34px;
background:     url('pulldown.png');
margin-top:     -25px;
margin-right:   auto;
margin-left:    17em;
z-index:        2;
}

Answer 1

你正在以错误的方式使用jQuery选择器，这是应该如何。

$(document).ready(function(){
  $(".section_content_wrapper > #pulldown_tab").click(function(){
    $(".section_content_wrapper > #cream_of_the_craft").slideToggle("slow");
  });
});

我建议你阅读jQuery简介：http://learn.jquery.com/

Answer 2

我测试了这个和它的工作。代码段如下：

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script> 

  $(document).ready(function(){
        $(".section_content_wrapper,#pulldown_tab").click(function(){
        $(".section_content_wrapper,#cream_of_the_craft").fadeToggle("slow");
          });
    });
  </script>

在选择器之间使用逗号并使用fadetoggle（）。

Answer 3

您的选择器错了。他们应该是：

$(document).ready(function(){
    $(".section_content_wrapper #pulldown_tab").click(function(){
        $(".section_content_wrapper #cream_of_the_craft").slideToggle("slow");
    });
});

// .something equals class="something"
// #something equals id="something"

其他冷却器选择器也可用here

Answer 4

有几件事。

#pulldown_tab不包含任何内容，因此您无需点击任何内容。
你的选择器坏了。由于pulldown_tab和cream_of_the_craft都有id，因此您可以分别直接将它们称为$("#pulldown_tab")和$(#cream_of_the_craft)。

有关您想要的工作示例，请参阅以下jsfiddle：http://jsfiddle.net/aB5Dy/

Answer 5

jQuery Selector标签不正确......

$(document).ready(function () {
$("div.section_content_wrapper , div#pulldown_tab").click(function () {
    $("div.section_content_wrapper  , div#cream_of_the_craft").slideToggle("slow");
});

}）;

在jquery

中使用多个选择器

jquery toggle淡入/淡出

5 个答案: