Javascript 代码在流体布局中不起作用 + Adob​​e CS6 Dreamweaver

Question

I have started learning responsive web sites. As a part of it I started using Fluid Grid Layout with Dreamviewer CS 6. But the problem is that java script functions are not working for toggles.

[------------------------------Nav Bar(nav)--------------------------------------------------------------------] [profile]

As shown in the figure profile div has a drop down menu and for the nav bar when the screen width is below 480, horizontal nav bar will convert will change to vertical bar and has a toggle to show submenu.

help me out

 //right click disable $(function() { $(this).bind("contextmenu", function(e) { e.preventDefault(); }); }); //drop down -logout $(document).ready(function() { $(".account").click(function() { var X=$(this).attr('id'); if(X==1) { $(".submenu").hide(); $(this).attr('id', '0'); } else { $(".submenu").show(); $(this).attr('id', '1'); } }); //Mouse click on sub menu $(".submenu").mouseup(function() { return false; }); //Mouse click on my account link $(".account").mouseup(function(){ return false; }); //Document Click $(document).mouseup(function(){ $(".submenu").hide(); $(".account").attr('id', ''); }); });

 @charset "utf-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 5; dw-num-cols-tablet: 8; dw-num-cols-desktop: 12; dw-gutter-percentage: 25; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ /* Mobile Layout: 480px and below. */ @media only screen and (max-width: 480px) { .gridContainer { margin-left: auto; margin-right: auto; width: 87.36%; padding-left: 1.82%; padding-right: 1.82%; } #nav { clear: none; float: left; text-align : center; margin-left: 4.1666%; width: 58.3333%; display: block; } #nav > ul { border: 1px solid #e5e5e5; border-radius: 5px; list-style-type: none; margin: 0; padding: 0; max-width: 200px; } #nav > ul > li a { display: block; text-decoration: none; padding: 10px; color: #666; } #nav > ul > li > a { border-bottom: 1px solid #e5e5e5; } #nav > ul > li > a:hover { color: #000; background: #e5e5e5; } #nav > ul > li > a.active { background: #e5e5e5; } #nav > ul > li ul { display: none; padding: 10px 20px 10px 30px; border: none; border-bottom: 1px solid #e5e5e5; } #nav > ul > li ul li { padding-left: 5px; } #nav > ul > li ul li a { border: 0; padding: 5px 10px 5px 0; } #nav > ul > li ul li a:hover { color: #000; } #nav > ul > li.dropdown { position: relative; } #nav > ul > li.dropdown:after { content: ""; position: absolute; right: 10px; top: 14px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #686868; } #nav > ul > li.dropdown.open:after { content: ""; position: absolute; right: 12px; top: 17px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #686868; } #profile { clear: none; float: left; margin-left: 20.1666%; width: 16.6666%; display: block; color: #555; text-align:left; } .submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); clear:both; } #profile li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration:none; } #profile li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede; } } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; } #nav { clear: none; float: left; margin-left: 2.5641%; width: 74.3589%; display: block; text-align : center; } #nav ul ul { display : none; } #nav ul li:hover > ul { display : block; } #nav ul { background-color : #fff; margin-top : 10px; padding : 0 20px; list-style : none; position : relative; display: inline-block; zoom: 1; *display: inline; margin-right : -80px; font-family :'Lato', sans-serif; text-transform : uppercase; font-size : 1em; } #nav ul li { float : left; } #nav ul li:hover { border-bottom : 5px solid #339966; color : #fff; } #nav ul li a:hover { color : #ffffff; background : #1bbc9b; } #nav ul li a { display : block; padding : 0.3em 0.8em; font-family :'Lato', sans-serif; font-size : 0.9em; color : #444; text-decoration : none; } #nav ul ul { background-color : #fff; border-radius : 0; padding : 0; position : absolute; top : 100%; box-shadow : 0 0 9px rgba(0, 0, 0, 0.15); z-index: 999999 } #nav ul ul li { float : none; position : relative; font-family :'Lato', sans-serif; text-transform : uppercase; font-size : 0.85em; } #nav ul ul li a { padding : 0.4em 1.2em; color : #000; font-family :'Lato', sans-serif; text-transform : uppercase; font-size : 1em; } #nav ul ul:before { content :""; display : block; height : 20px; position : absolute; top : -20px; width : 100%; } #profile { clear: none; float: left; margin-left: 12.5641%; width: 10.2564%; display: block; color: #555; text-align:left; } .submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); clear:both; } #profile li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration:none; } #profile li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.5%; max-width: 1232px; padding-left: 0.75%; padding-right: 0.75%; margin: auto; } #nav { clear: none; float: left; margin-left: 1.6949%; width: 83.0508%; display: block; text-align : center; } #nav ul ul { display : none; } #nav ul li:hover > ul { display : block; } #nav ul { background-color : #fff; margin-top : 10px; padding : 0 20px; list-style : none; position : relative; display: inline-block; zoom: 1; *display: inline; margin-right : -80px; font-family :'Lato', sans-serif; text-transform : uppercase; font-size : 1em; } #nav ul li { float : left; } #nav ul li:hover { border-bottom : 5px solid #339966; color : #fff; } #nav ul li a:hover { color : #ffffff; background : #1bbc9b; } #nav ul li a { display : block; padding : 0.3em 0.8em; font-family :'Lato', sans-serif; font-size : 0.9em; color : #444; text-decoration : none; } #nav ul ul { background-color : #fff; border-radius : 0; padding : 0; position : absolute; top : 100%; box-shadow : 0 0 9px rgba(0, 0, 0, 0.15); z-index: 999999 } #nav ul ul li { float : none; position : relative; font-family :'Lato', sans-serif; text-transform : uppercase; font-size : 0.85em; } #nav ul ul li a { padding : 0.4em 1.2em; color : #000; font-family :'Lato', sans-serif; text-transform : uppercase; font-size : 1em; } #nav ul ul:before { content :""; display : block; height : 20px; position : absolute; top : -20px; width : 100%; } #profile { clear: none; float: left; margin-left: 6.6949%; width: 6.7796%; display: block; } .submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); clear:both; } #profile li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration:none; } #profile li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede; } }

 <!doctype html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <link href="scripts/boilerplate.css" rel="stylesheet" type="text/css"> <link href="css/fluidcss.css" rel="stylesheet" type="text/css"> <!-- To learn more about the conditional comments around the html tags at the top of the file: paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ Do the following if you're using your customized build of modernizr (http://www.modernizr.com/): * insert the link to your js here * remove the link below to the html5shiv * add the "no-js" class to the html tags at the top * you can also remove the link to respond.min.js if you included the MQ Polyfill in your modernizr build --> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="scripts/respond.min.js"></script> <script src="scripts/func1.js"></script> <script type="text/javascript" src="scripts/jquery.min.js"></script> <script type="text/javascript" src="scripts/jquery.ajax.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.verticalnav > li > a').click(function(){ $(this).parent().toggleClass('open'); $(this).siblings().toggle(); }); }); </script> </head> <body> <div class="gridContainer clearfix"> <div id="nav"> <ul> <li class="dropdown"><a href="home.php">Home</a></li> <li class="dropdown"><a href="#">Portfolio</a> <ul> <li><a href="AD1.php">Active Directory</a></li> <li><a href="#">HelpDesk</a></li> <li><a href="CTS.php">CTS</a></li> <li><a href="#">Exchange/Infra</a></li> <li><a href="#">Others</a></li> </ul> </li> <li class="dropdown"><a href="#">Downloads</a></li> <li class="dropdown"><a href="#">Blog</a></li> <li class="dropdown"><a href="#">News</a></li> <li class="dropdown"><a href="#">Contact US</a></li> </ul> </div> <div id="profile"> <a class="account" >Account</a> <div class="submenu"> <ul class="root"> <li ><a href="#Dashboard" >Dashboard</a></li> <li ><a href="#Profile" >Profile</a></li> <li ><a href="#settings">Settings</a></li> <li ><a href="logout.php">LogOut</a></li> </ul> </div> </div> </div> </body> </html>

Answer 1

Do these following changes:

Replace the bind function.

$(function() {
    $(document).bind("contextmenu", function(e) {
        e.preventDefault();
    });
    $("body").bind("contextmenu", function(e) {
        e.preventDefault();
    });
});

You have given:

var X = $(this).attr('id');
if (X == 1) {

But there's no single element or element with .account has an ID and none has an ID with 1 .

These event handlers do not make any sense:

$(".submenu").mouseup(function() {
    return false;
});

$(".account").mouseup(function(){
    return false;
});

Why have you given them?

And finally, this is not gonna work:

$(document).mouseup(function(){
    $(".submenu").hide();
    $(".account").attr('id', '');
});

The whole JavaScript screws up the whole page's working. So you need to extensively correct them before you do anything!