2

TechCrew の Web サイトの中央の div ボックスの右側にボタンを追加しようとしています。小さな歯車のアイコンになります。追加情報を表示するオプションを含むドロップダウン メニューがあります。私はそれを正しく持っていると思いますが、うまくいきません。このCodecademy noobを助けてください...チェックしてください：

進行中の作業

HTML

<head>
<script src="jQuery/jquery-1.9.1.js"></script>
<script src="jQuery/ui/jquery.ui.effect.js"></script>
<script src="jQuery/ui/jquery.ui.effect-scale.js"></script>
<script src="jQuery/ui/jquery.ui.effect-shake.js"></script>
<script src="jQuery/ui/jquery.ui.effect-slide.js"></script>
<script src="jQuery/ui/jquery.ui.core.js"></script>
<script src="jQuery/ui/jquery.ui.widget.js"></script>
<script src="jQuery/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="tcn_main.js"></script>  
</head>
<body>
  <div id="sidebox"><h2>Advisory Board</h2><!--This is the extra info that will pop up-->
        <ul>
            <li>Name1</li>
            <li>Name2</li>
        </ul>    
  </div>
<a href="#" class="jqbutton {icon: ui-icon-gear}">Show additional information</a><!--gear icon, text gets hidden-->
<ul id="menu"> <!--Dropdown menu inside the gear-->
  <li class="ui-state-disabled"><a href="#">Who is advising you guys?</a></li>
</ul>
</body>

CSS

@import "jQuery/themes/base/jquery.ui.base.css";
@import "jQuery/themes/base/jquery.ui.theme.css";
#sidebox{
/*Let's have it start hidden (display:none) and use JavaScript to call it into existance upon request */
    display:none;
    float:left;
    margin-right:auto;
    margin-top:25%;
    padding:5px;
    -moz-box-shadow: 0 0 30px 5px #999;
    -webkit-box-shadow: 0 0 30px 5px #999;
    box-shadow: 0 0 30px 5px #999;
    background-color:#fcde3f;
    color:#be2226;
    overflow:hidden;
    min-width:200px;
    max-width:500px;

}
#sidebox h2{
    text-align:center;
}
.ui-menu { 
    width: 150px; 
}
#menu{
    display:none;
}
#options{

}

JavaScript

$(document).ready(function(){
    $('#menu').menu();

    $(".jqbutton").each(function(){
        var data = $(this).metadata();
        $(this).button({ icons: {primary:data.icon} });
    });

    $('.jqbutton').click(function(){
        $('#menu').fadeIn('slow');
    });

    $('#menu a').click(function(){
        $('#sidebox').fadeIn('slow');
    });

});
4

1 に答える 1

0

jQuery 経由で取得しようとしているボタンのクラスが、「class="jqbutton」ではなく「class="jqbutton {icon: ui-icon-gear}」である可能性があります。

< a > に ID を与えてから、jquery 経由で ID を取得してみてください。

したがって、次を追加します。

<a id="myBtn" href="#" class="jqbutton {icon: ui-icon-gear}">Show additional information</a>

と

$('#myBtn').click(function(){
    $('#menu').fadeIn('slow');
});
于 2013-03-19T01:53:07.870 に答える