Спасибо, рядом с кнопкой можно поставить span(значок треугольника)
Этот код будет нормальный, для смены значка???
$('.filter_1').scroll(function () {
if (this.scrollHeight - this.scrollTop === this.clientHeight) {
$('span').removeClass('glyphicon-triangle-bottom');
$('span').addClass('glyphicon-triangle-top');
} else {
$('span').removeClass('glyphicon-triangle-top');
$('span').addClass('glyphicon-triangle-bottom');
}
});
|
solunski.d,
достаточно ставить и убирать 1 класс $('span').toggleClass('стелка вниз', n); |
solunski.d,
.filter_other1{
background-color: #0000FF;
}
.test.filter_other1{
background-color: #228B22;
}
$(function(){
var $ul = $('.filter_1'),
$button = $('.filter_other1'),
n = true;
$ul.scroll(function () {
if (this.scrollHeight - this.scrollTop === this.clientHeight || !this.scrollTop) {
n = !n;$button.val( n ? 'вниз':'вверх');
$button.toggleClass('test', !n);
}
});
$button.click(function () {
$ul.stop().animate({
scrollTop: n ? '+=100' : '-=100'
}, 1000);
});
});
|
Все спасибо огромное, теперь дошло!
Смог сделать смену значка туда и обратно. |
solunski.d,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul {
height: 150px;
list-style: none;
overflow-y: hidden;
margin: 0;
padding: 0;
width: 80%;
}
.filter_other1{
margin: 10px;
cursor: pointer;
}
.filter_other1:after{
content: '\23EC';
color: red;
font-size: 23px;
margin-left: 4px;
}
.test.filter_other1:after{
content: '\23EB';
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var $ul = $('.filter_1'),
$button = $('.filter_other1'),
n = true;
$ul.scroll(function () {
if (this.scrollHeight - this.scrollTop === this.clientHeight || !this.scrollTop) {
n = !n;$button.text( n ? 'вниз':'вверх');
$button.toggleClass('test', !n);
}
});
$button.click(function () {
$ul.stop().animate({
scrollTop: n ? '+=100' : '-=100'
}, 1000);
});
});
</script>
</head>
<body>
<ul class="h-filter__ul filter_1">
<li class="h-filter__list">
<input type="checkbox" name="checkboxG1" id="checkboxG1" class="css-checkbox">
<label for="checkboxG1" class="css-label radGroup1 clr">Горошек</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG2" id="checkboxG2" class="css-checkbox">
<label for="checkboxG2" class="css-label radGroup1 clr">Клеточка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG3" id="checkboxG3" class="css-checkbox">
<label for="checkboxG3" class="css-label radGroup1 clr">Линейка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG4" id="checkboxG4" class="css-checkbox">
<label for="checkboxG4" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG5" id="checkboxG5" class="css-checkbox">
<label for="checkboxG5" class="css-label radGroup1 clr">Удило</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG6" id="checkboxG6" class="css-checkbox">
<label for="checkboxG6" class="css-label radGroup1 clr">Шарм</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG7" id="checkboxG7" class="css-checkbox">
<label for="checkboxG7" class="css-label radGroup1 clr">Горошек</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG8" id="checkboxG8" class="css-checkbox">
<label for="checkboxG8" class="css-label radGroup1 clr">Клеточка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG9" id="checkboxG9" class="css-checkbox">
<label for="checkboxG9" class="css-label radGroup1 clr">Линейка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG10" id="checkboxG10" class="css-checkbox">
<label for="checkboxG10" class="css-label radGroup1 clr">Узор</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
<li class="h-filter__list">
<input type="checkbox" name="checkboxG11" id="checkboxG11" class="css-checkbox">
<label for="checkboxG11" class="css-label radGroup1 clr">Крапенка</label>
</li>
</ul>
<span class="filter_other1">вниз</span>
</body>
</html>
|
Спасибо огромное, вот я подправил под свою разметку так, посмотри, хм.. твой вариант по сути тоже хорош, а что лучше?
$(function(){
var $ul = $('.filter_1'),
$button = $('.filter_other1'),
n = true;
$ul.scroll(function () {
if (this.scrollHeight - this.scrollTop === this.clientHeight || !this.scrollTop) {
n = !n;
$button.html( n ? 'вниз <span class="glyphicon glyphicon-triangle-bottom h-filer_other-icon" aria-hidden="true"></span>':'вверх <span class="glyphicon glyphicon-triangle-top h-filer_other-icon" aria-hidden="true"></span>');
}
});
$button.click(function () {
$ul.stop().animate({
scrollTop: n ? '+=100' : '-=100'
}, 1000);
});
});
|
solunski.d,
чем меньше изменений в html тем быстрее |
Теперь ясна суть
|
| Часовой пояс GMT +3, время: 22:59. |