我在 Jquery 中点击时遇到问题!与 mouseover 相同的另一个事件可以正常工作，但 .click 却不能!它显示警报!并且增加宽度，但再次回到之前的宽度!
<!DOCTYPE html5/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<nav id="header" class="navbar navbar-default navbar-static">
<ul class="nav navbar-nav" id="ul" dir="rtl">
<li>
<a href="" class="me">من !</a>
</li>
<li class="Active">
<a href="">صفحه اصلی</a>
</li>
<li>
<a href="">مهارت ها</a>
</li>
<li>
<a href="">تماس با من</a>
</li>
</ul>
</nav>
<div id="about">
</div>
<ol class="console">
<li>
<span class="aden">[aden]~</span> Initialisation <span>(100%)
</span>
</li>
<li>
<span class="aden">[aden]~</span> ← <span> for Left and
</span> → <span> for Right </span>
</li>
<li>
<span class="aden">[aden]~</span> <span></span>
</li>
</ol>
</body>
<script type='text/javascript'>
$(document).ready(function() {
$(document).on('click', '.me', function() {
alert("hi");
$(".console").css("width", "400px");
});
});
</script>
</html>
CSS:
@font-face {
font-family: 'CaviarDreams';
src: url('CaviarDreams.woff');
}
@font-face {
font-family: 'gardesh';
src: url('gardesh.otf');
}
@font-face {
font-family: 'nazanin';
src: url('nazanin.otf');
}
body,html {
font-family: CaviarDreams;
}
#header {
width: 100%;
height: 70px;
background-color: white;
font-family: nazanin;
font-size: 15px;
float: right;
border: none;
}
#header li {
float: right;
}
#header .me {
color: gray;
border-radius: 60px;
font-weight: bold;
}
#header li a {
padding-top: 24px;
padding-bottom: 24px;
color: gray;
font-weight: bold;
}
#header .Active a{
color: black;
background-color: white;
}
#header h1 {
float: left;
color: white;
font-weight: bold;
margin: 10px -10px;
}
#ul {
float: right;
}
#about {
position: fixed;
right: 0;
width: 300px;
display: none;
float: right;
height: 673px;
border: black solid;
background-color: white;
}
.console {
background-color: #000;
width: 350px;
height: auto;
min-height: 134px;
padding: 10px 40px;
border-radius: 15px;
list-style: none;
float: right;
margin: 350px 450px 0 0;
}
.aden {
color: #fff;
}
ol.console > li {
margin-top: 20px;
margin-bottom: 5px;
}
最佳答案
$(document).ready(function() {
$(".me").click(function(event) {
event.preventDefault();
$(".console").css("width", "400px");
});
});<!DOCTYPE html5/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<nav id="header" class="navbar navbar-default navbar-static">
<ul class="nav navbar-nav" id="ul" dir="rtl">
<li>
<a href="" class="me">من !</a>
</li>
<li class="Active">
<a href="">صفحه اصلی</a>
</li>
<li>
<a href="">مهارت ها</a>
</li>
<li>
<a href="">تماس با من</a>
</li>
</ul>
</nav>
<div id="about">
</div>
<ol class="console">
<li>
<span class="aden">[aden]~</span> Initialisation <span>(100%)
</span>
</li>
<li>
<span class="aden">[aden]~</span> ← <span> for Left and
</span> → <span> for Right </span>
</li>
<li>
<span class="aden">[aden]~</span> <span></span>
</li>
</ol>
</body>
</html>它运行完美，我刚刚尝试了代码片段，您也可以检查它。
关于JQuery click() 无法正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44601988/