点击<a> element

Question

I want to know how to change display style and element class when I click on element: and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "

Before click on element:

<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->

            <a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
              <i class="fa fa-fw fa-search"></i>

              <span class="sr-only">
                Search
              </span>
            </a>
          </li>
        </ul>
      </div>
      <progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
    </nav>
    <div class="search-area">
      <div class="container">
        <div class="search-area-input">
          <input placeholder="Search articles" type="text">
        </div>
        <div class="search-area-results index">
          <ol class="article-index-list"></ol>
        </div>
      </div>
    </div>

And after click on element:

<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->

            <a class="nav-link search-toggle" href="#" title="Search articles">
              <i class="fa fa-fw fa-times" title="Close search"></i>

              <span class="sr-only">
                Search
              </span>
            </a>
          </li>
        </ul>
      </div>
      <progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
    </nav>
    <div class="search-area" style="display: block;">
      <div class="container">
        <div class="search-area-input">
          <input placeholder="Search articles" type="text">
        </div>
        <div class="search-area-results index">
          <ol class="article-index-list"></ol>
        </div>
      </div>
    </div>

Answer 1

$("a").click(function(){
    var i =$(this);
    i.removeAttr('title');
    i.attr('title','Search articles');
    i.removeAttr('id');
    var j = $('i.fa-search');
    j.removeAttr('class');
    j.attr('class','fa fa-fw fa-times');
    j.attr('title','Close search');
    $('.search-area').css('display',"block");
});

如果你想再次（显示：无）

$("a").click(function(){
    var i =$(this);
    i.removeAttr('title');
    i.attr('title','Search Posts');
    i.attr('id','nav-link-search');
    var j = $('i.fa-times');
    j.removeAttr('class');
    j.attr('class','fa fa-fw fa-search');
    j.removeAttr('title');
    $('.search-area').css('display',"none");
});

Answer 2

下面的代码会将d​​isplay：block添加到元素“search-area”。这是因为你有一个带有“element”类的click元素。

$(".element").click(function(){
  $(".search-area").css( "display", "block" );
});

Answer 3

要在单击链接时更改元素，一般概念是

＆＃13;

＆＃13;

$('a').on('click',function(e) {
  e.preventDefault(); // don't follow the link
  $('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
  $('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->

            <a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
              <i class="fa fa-fw fa-search"></i>

              <span class="sr-only">
                Search
              </span>
            </a>
          </li>
        </ul>
      </div>
      <progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
    </nav>
    <div class="search-area">
      <div class="container">
        <div class="search-area-input">
          <input placeholder="Search articles" type="text">
        </div>
        <div class="search-area-results index">
          <ol class="article-index-list"></ol>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

    $(document).on('click', ".search-toggle", function(e) {
      e.preventDefault();
      $(".search-area").show();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div><ul class="nav navbar-nav">
  <li class="nav-item search">
    <!-- this a element -->

    <a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
      <i class="fa fa-fw fa-search"></i>

      <span class="sr-only">
                Search
              </span>
    </a>
  </li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
  <div class="container">
    <div class="search-area-input">
      <input placeholder="Search articles" type="text">
    </div>
    <div class="search-area-results index">
      <ol class="article-index-list"></ol>
    </div>
  </div>
</div>