0

我已经使用 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;
}
4

5 回答 5

3

您以错误的方式使用 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/

于 2013-06-03T05:06:21.543 回答
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()。

于 2013-06-03T05:26:37.097 回答
1

有几件事。

  1. #pulldown_tab 不包含任何内容，因此您无需单击任何内容。

  2. 你的选择器坏了。$("#pulldown_tab")由于 pulldown_tab和cream_of_the_craft 都有 id，你可以$(#cream_of_the_craft)分别直接引用它们。

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

于 2013-06-03T05:15:53.703 回答
1

你的选择器是错误的。他们应该是：

$(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"

其他冷却器选择器也可在此处获得

于 2013-06-03T05:07:55.320 回答
0

jQuery 选择器标签不正确...

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

});

用于在jquery中使用多个选择器

于 2013-06-03T05:09:27.760 回答