如何防止父元素折叠？

var li = $('li');
    li.click(function () {
        var children = $(this).children('ul');
        if (children.is(':hidden')) children.show();
        else children.hide();
    })

li > ul {
            margin-left: 20px;
            display: none;
        }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-sm-4">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="#">животные</a>
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="#">хищники</a>
<ul class="nav nav-pills nav-stacked"><li role="presentation"><a href="#">волк</a></li>
<li role="presentation"><a href="#">тигр</a></li>
<li role="presentation"><a href="#">лев</a></li>
</ul>
</li>
<li role="presentation"><a href="#">травоядные</a>
<ul class="nav nav-pills nav-stacked"><li role="presentation"><a href="#">слон</a></li>
<li role="presentation"><a href="#">заяц</a></li>
<li role="presentation"><a href="#">лама</a></li>
<li role="presentation"><a href="#">зебра</a></li>
</ul>
</li>
</ul>
</li>
<li role="presentation"><a href="#">растения</a>
<ul class="nav nav-pills nav-stacked">
</ul>
</li>
</ul>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>