0

jQuery について学び始めたばかりで、障害物にぶつかったと思います。基本的に私が持っているのは、内側のクリック可能な領域を表す です。だから私はこのコードを使用しようとしています:

$(document).ready(function(){
$('#side_menu_icon').click(function(){
    $('#side_menu').slideToggle('slow');
});
});

#side_menu_iconクリック可能な領域はどこにあり、#side_menu一時的に幅、高さ、および色を持つ単なるプレースホルダーです。デフォルトでは、これ<div>を display:none; に設定しました。jQuery関数がそれを可視に設定すると仮定して、私が見ていた例は同じことをしたからです. 領域をクリックしても何も起こらないので、と の#side_menu_icon両方に を取り付けてみまし<img>た<div>。ドキュメントが相互にコードを継承する方法について理解できないことがあると思うので、それも含めます。

<head>
    <link rel="stylesheet" type="text/css" href="style/main.css"></link>
    <script type="text/javascript" src="js/jquery-1.10.0.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <title>Test Blog Site</title>
</head>

main.js は、上記の jQuery 関数を呼び出すファイルです。

お時間をいただきありがとうございます。これが解決策として十分な情報であることを願っています。

編集: HTML のバージョンを削減:

<body>
    <div id="top_bar">
        <h1 style="padding-left:1em;">Title</h1>
    </div>
    <div id="side_menu_icon">
        <img src="images/side-menu-closed-15px.gif" />
    </div>
    <div id="side_menu">
    </div>
    <div id="post_holder">
        <img style="margin-bottom:-5px" src="images/post-collection-top-transparent.gif" />
        <div id="post_collection">
            <!-- stuff -->
        </div>
        <img src="images/post-collection-bottom-transparent.gif" />
    </div>

</body>

関連するセクションは

        <div id="side_menu_icon">
        <img src="images/side-menu-closed-15px.gif" />
    </div>

と

        <div id="side_menu">
    </div>

CSS:

body {
font-family: "Courier New";
background-image: url("../images/background-1728x1080.jpg");
background-size:100%;
background-attachment:fixed;
margin: 0;
}

img {
max-width: 100%;
width: auto;
height: auto;
outline-offset:0px;
}

h1,h2,h3,h4,h5,h6,div,p{
padding:0;
margin:0;
}

.post{
width:90%;
padding-left: 5%;
}

#top_bar{
width: 100%;
z-index:99;
position: fixed;
font-size:15px;
background-image: url("../images/item-background.jpg");
background-size:6%;
color: white;
}

#side_menu_icon{
border: 4px solid #6e3b10;
margin-top: 50px;
position:fixed;
right:0;
background-image: url("../images/item-background.jpg");
}

#post_holder{
z-index:98;
text-align:center;
margin:0;
position:relative;
}

#post_collection{
background-image: url("../images/post-background.gif");
background-size: 100%;
max-width: 900px;
text-align:left;
margin: auto;
}

#side_menu{
height:500px;
    width:100px;
background-color:yellow;
display:none;
}

関連する部分は #side_menu と #side_menu_icon だと思います。

4

1 に答える 1

0

私の質問に対する解決策を見つけました。CSS の一部が jQuery の正常な動作を妨げていました。私はそれを回避する方法を見つける必要があります。

于 2013-06-13T23:08:58.077 に答える