sidr

sidr

关注
发信
关注(28)粉丝(399)

javascript - Sidr具有不同内容的多个菜单

我正在尝试将sidr用于我正在构建的网站。

该网站由一个可滚动的长页面组成。它包含3个锚点div，并加载到第二个锚点上，以便您可以上下滚动。
到目前为止，这仍然可行，但是当我尝试实现sidr菜单时（我需要显示3种不同的文本，文本1的打开带有锚点div 1中的按钮，依此类推），但我什至无法获得最简单的版本即使我从网站复制示例代码也无法正常工作。

这就是我现在所拥有的；

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Konijntjes TEST</TITLE>
         <script>
$(document).ready(function() {
    $('#menu1').sidr({
      name: 'menu1',
      side: 'left' // By default
    });
    $('#menu2').sidr({
      name: 'menu2',
      side: 'right'
    });

      $('#menu3').sidr({
      name: 'menu3',
      side: 'left'
    });
});
</script>
<link rel="stylesheet" href="style.css" type="text/css">
      <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">

   </head>
   <body onload="moveWindow()">

   <!-- Include jQuery -->
    <script src="javascripts/jquery.js"></script>
    <!-- Include the Sidr JS -->
    <script src="javascripts/sidr/jquery.sidr.min.js"></script>
      <script type="text/javascript" language="javascript">
    function moveWindow (){window.location.hash="mylocation";}
</script>

   <div class="container">

   <!--- PAGE 2 --->
   <div class="page2">

      <h1>Deel 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <a id="menu1" href="#menu1">Menu 1</a>

      <div id="sidr 2">
  <!-- Your content -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
   </div>

<!--- PAGE 1 --->

<a name="mylocation"><div class="page1"><div class="pagecontainer">
<h1>This should be the beginning.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

    <a id="menu2" href="#menu2">Menu 2</a>

    <div id="sidr 1">
  <!-- Your content -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
   </div>

    </div>
</div></a>

<!--- PAGE 3 --->

<div class="page3">

      <h1>Deel 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

      <a id="menu3" href="#menu3">Menu 3</a>

      <div id="sidr 3">
  <!-- Your content -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
   </div>


   </div>







   </div>

   </body>
</html>


这是我拥有的CSS，再加上另一个文档中的sidr CSS。

body {
    font-family: verdana;
    line-height: 1.2em;
    font-size:1.1em;
}
p { width: 100%;
}

.container {
    margin: 0px auto;
    width: 800px;
}

h1 {
    padding-bottom: 2em;
}

.pagecontainer {
    padding-top:9.8em;
    padding-bottom:10.2em;
}

.page1 {
    padding-top:2em;
}

.page2 {
    padding-top:2em;
}

.page3 {
    padding-top:2em;
    padding-bottom: 3em;

}


我究竟做错了什么？我是javascript新手，因此不确定是否在所有正确的位置加载了脚本。

最佳答案

您在两个不同的位置关闭了太多的div元素（对于2个打开标签，为3个关闭标签）。同样，script标签将按照您放置标签的顺序进行解析，这意味着，如果您在实际加载此功能的代码之前调用.sidr()函数，它将无法正常工作！

您以错误的方式定位.sidr()菜单元素：您告诉链接是菜单本身！以下是正确启动.sidr()的方法：

$('#myLink').sidr({
    name: 'TheTargettedContainerWhichWillBecomeTheHiddenSidrMenu',
    side: 'left' /* Pretty self explanatory */
});


Live Demo



的HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Konijntjes TEST</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
        <!-- Include jQuery -->
        <script src="javascripts/jquery.js"></script>
        <!-- Include the Sidr JS -->
        <script src="javascripts/sidr/jquery.sidr.min.js"></script>
        <script type="text/javascript">
            function moveWindow() {
                window.location.hash = "mylocation";
            }
        </script>
        <script>
            $(document).ready(function() {
                $('#menu1').sidr({
                    name: 'page1',
                    side: 'left' // By default
                });
                $('#menu2').sidr({
                    name: 'page2',
                    side: 'right'
                });

                $('#menu3').sidr({
                    name: 'page3',
                    side: 'left'
                });
            });
        </script>
    </head>
    <body onload="moveWindow()">
        <div class="container">
            <!-- PAGE 2 -->
            <div class="page2">
                <h1>Deel 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                <a id="menu1" href="#menu1">Menu 1</a>
                <div id="sidr 2">
                    <!-- Your content -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
                </div>
            </div>
            <!--- PAGE 1 -->
            <a name="mylocation">
                <div class="page1">
                    <div class="pagecontainer">
                        <h1>This should be the beginning.</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <a id="menu2" href="#menu2">Menu 2</a>
            <div id="sidr 1">
            <!-- Your content -->
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
            </div>
            </div>
            </div>
            </a>
            <!-- PAGE 3 -->
            <div class="page3">
                <h1>Deel 3</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                <a id="menu3" href="#menu3">Menu 3</a>
                <div id="sidr 3">
                    <!-- Your content -->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
                </div>
            </div>
        </div>
    </body>
</html>

07-26 02:37
Powered by LMLPHP ©2024 sidr 0.027444