JQuery click() 不能正常工作？

Question

我在点击 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> &#8592 <span> for Left and 
     </span> &#8594; <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;
}

Answer 1

你也必须展示你的 HTML

 $(document).ready(function() {
    $('.me').on('click', function() {
      $(".console").css("width", "400px");
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button name="sub" class="me">click</button>

Answer 2

$(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> &#8592 <span> for Left and 
     </span> &#8594; <span> for Right </span>
   </li>
   <li>
     <span class="aden">[aden]~</span> <span></span>
   </li>
 </ol>
 </body>
</html>

它运行完美，我刚刚尝试了代码片段，您也可以检查一下。

JQuery click() 不能正常工作？

JQuery click() doesn't work proper?

jquery

html

click

mouseover