单击<a>元素</a>时更改显示和图标

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");
});

if u want to (display:none) again

$("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

The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".

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

Answer 3

To change an element when you click on a link, the general concept is

 $('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 }); 

 <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> 

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>