Add and Remove Class Based on Open Div

Question

I have this HTML code that comes with the following jQuery:

<nav class="navigation">
    <ul>
        <li class="has-sub">iPad <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="iPadAir2.php">iPad Air 2 Review</a></li>
                <li><a href="iPadAir.php">iPad Air Review</a></li>
                <li><a href="iPadMini2.php">iPad mini 2 Review</a></li>
            </ul>
        </li>
        <li class="has-sub">iPhone <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="iPhone6.php">iPhone 6 Review</a></li>
                <li><a href="iPhone5s.php">iPhone 5s Review</a></li>
                <li><a href="iPhone5c.php">iPhone 5c Review</a></li>
                <li><a href="iPhone5.php">iPhone 5 Review</a></li>
                <li><a href="iPhone4s.php">iPhone 4s Review</a></li>
            </ul>
        </li>
        <li class="has-sub">Mac <i class="fa fa-angle-down"></i>
            <ul class="sub-menu">
                <li><a href="MacBook.php">MacBook Review</a></li>
                <li><a href="MacBookProRetina.php">MacBook Pro w/ Retina display Review</a></li>
                <li><a href="MacBookPro.php">MacBook Pro Review</a></li>
                <li><a href="MacBookAir.php">MacBook Air Review</a></li>
            </ul>
        </li>
    </ul>
</nav>

$(document).ready(function() {
    $(".has-sub").click(function() {
        $(this).find(".sub-menu").slideToggle(500);
        $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500);
    });
});

As you can see, ihas a class fa-angle-down. When clicked, it opens li, but I would like to remove the class fa-angle-downand add the class fa-angle-upto the class i. Can someone please show me how I will do this?

Thanks.

EDIT:

CSS for navigation below.

nav {
    background : #034893;
    height : 50px;
}

nav ul,
nav li,
nav a { 
    margin : 0; 
    padding : 0;
}

nav > ul > li {
    color : white;
    display : block;
    float : left;
    font-size : 18px;
    line-height : 50px;
    position : relative;
    transition : all .3s linear;
    width : 25%;
    z-index : 999;
}

nav > ul > li:hover {
    background : #88bffc;
    color : #333;
    cursor : pointer;
}

nav > ul > li > ul {
    background : #034893;
    left : 0;
    margin : 0 auto;
    position : absolute;
    right : 0;
    text-align : left;
}

nav ul ul a {
    color : white;
    display : block;
    font-size : 14px;
    padding : 6px 12px;
}

nav ul ul a:hover {
    background : #88bffc;
}

Answer 1

EDITED . This works, it is verified that classes switch to the DOM. Editing was simply to toggle the .fa class, which toggles the button down / up for a menu item.

$(".has-sub").click(function(e) {
    e.preventDefault;
    $this = $(this);
    $this.find(".sub-menu").slideToggle(500);
    $this.siblings(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $this.find(".fa").toggleClass('fa-angle-down fa-angle-up');
    $this.siblings(".has-sub").not(this).find(".fa-angle-up").toggleClass('fa-angle-up fa-angle-down');
});

Answer 2

<a> - , , preventDefault();. fa-angle-down <i>, , <li>. , , ? toggleClass. , , e.preventDefault();

$(document).ready(function() {

  $(".has-sub").click(function(e) {
    // e.preventDefault();

    $(this).find(".sub-menu").slideToggle(500);
    $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500);
    $('.fa').not(this).removeClass('fa-angle-down').addClass('fa-angle-up');
    $(this).find('.fa').toggleClass('fa-angle-down fa-angle-up');

  });
});

nav {
  background: #034893;
  height: 50px;
}
nav ul,
nav li,
nav a {
  margin: 0;
  padding: 0;
}
nav > ul > li {
  color: white;
  display: block;
  float: left;
  font-size: 18px;
  line-height: 50px;
  position: relative;
  transition: all .3s linear;
  width: 25%;
  z-index: 999;
}
nav > ul > li:hover {
  background: #88bffc;
  color: #333;
  cursor: pointer;
}
nav > ul > li > ul {
  background: #034893;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: left;
}
nav ul ul a {
  color: white;
  display: block;
  font-size: 14px;
  padding: 6px 12px;
}
nav ul ul a:hover {
  background: #88bffc;
}
.fa.fa-angle-up:before {
  content: '\f106 ';
}
.fa.fa-angle-down:before {
  content: '\f107 ';
}

<link href="http://fortawesome.imtqy.com/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<nav class="navigation">
  <ul>
    <li class="has-sub"><i class="fa fa-angle-up">iPad</i>
      <ul class="sub-menu">
        <li><a href="iPadAir2.php">iPad Air 2 Review</a>
        </li>
        <li><a href="iPadAir.php">iPad Air Review</a>
        </li>
        <li><a href="iPadMini2.php">iPad mini 2 Review</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><i class="fa fa-angle-up">iPhone</i>
      <ul class="sub-menu">
        <li><a href="iPhone6.php">iPhone 6 Review</a>
        </li>
        <li><a href="iPhone5s.php">iPhone 5s Review</a>
        </li>
        <li><a href="iPhone5c.php">iPhone 5c Review</a>
        </li>
        <li><a href="iPhone5.php">iPhone 5 Review</a>
        </li>
        <li><a href="iPhone4s.php">iPhone 4s Review</a>
        </li>
      </ul>
    </li>
    <li class="has-sub"><i class="fa fa-angle-up">Map</i>
      <ul class="sub-menu">
        <li><a href="MacBook.php">MacBook Review</a>
        </li>
        <li><a href="MacBookProRetina.php">MacBook Pro w/ Retina display Review</a>
        </li>
        <li><a href="MacBookPro.php">MacBook Pro Review</a>
        </li>
        <li><a href="MacBookAir.php">MacBook Air Review</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Hide result

Answer 3

    $(document).ready(function() { 
$(".has-sub").click(function() {
$(this).find('i.fa-angle-down').removeClass('fa-angle-down').addClass('fa-angle-up');
    $(this).find(".sub-menu").slideToggle(500);
 $(this).parent().children(".has-sub").not(this).find(".sub-menu").slideUp(500).parents('li').find('i.fa-angle-up').removeClass('fa-angle-up').addClass('fa-angle-down'); 
}); 
});

Answer 4

jQuery . Sometihng :

http://jsfiddle.net/j95en0Lp/1/

HTML:

<ul>
    <li class="fa-angle">Test (Click me to add a new class)</li>
</ul>

CSS

.fa-angle{
    color: red;
    cursor: pointer;
}

.fa-angle-up{
    color: blue;
    cursor: pointer;
}

JQuery

$(document).ready(function(){
    $(document).on('click', '.fa-angle', function(){
        $(this).addClass('fa-angle-up');
        $(this).removeClass('fa-angle');                     
    });

    $(document).on('click', '.fa-angle-up', function(){
        $(this).addClass('fa-angle');
        $(this).removeClass('fa-angle-up');                     
    });
});

, , , .. , .