the code that you used will take UL's with more than 10 list
items(li's) and hide items greater than 10
it seems from your html you are wanting to do something different since
you are hiding complete lists(UL's) already
here's an example of the exact same code working fine BUT with minor
changes to your html ( without display:none, and combining 2 UL's
within "main" into a single UL)
http://jsbin.com/odire
clcik on 'more" and compare the source to yours
The question then becomes....what exactly is the effect you are looking
for
dEwA nich wrote:
I've tried that script, but why the jquery doesn't work??
I'm newbie in jquery. I write like these :
<script type="text/_javascript_">
$(document).ready(function(){
$('.main ul').each(function(){
var $this = $(this), lis = $this.find('li:gt(9)').hide();
if(lis.length>0){
$this.append($('<li>').text('More').click(function(){
lis.toggle();
$(this).text($(this).text() === 'More' ? 'Less' :
'More');
}));
}
});
});
</script>
<body>
<ul id="narrow-search">
<li class="main">
Category
<ul>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
</ul>
<ul style="display:none;">
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
<li>Category Name</li>
</ul>
<a href="">more</a>
</li>
<li class="main">
Brand
</ul>
<ul style="display:none;">
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
<li>Brand Name</li>
</ul>
<a href="">more</a>
</li>
<li class="main">etc...</li>
</ul>
</body>
...
Can you help me,Charlie??? thanks before..
|
