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

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 に答える