На сайте http://fr3809bb.bget.ru/ при переходе из слайдера сверху на новость, сначала на секунду раскрывается меню, а потом опять сворачивается или при обновлении страницы. Вот скрин Меню аккордеон (раскрывается при нажатии с появлением подпунктов и закрывается при щелчке обратно).
Вот так подключил js отвечающий за это в head.phpPHP код:Само содержимое файла menu.js
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/menu.js"></script>
PHP код:В чем может быть проблема? Файл взял готовый в сети. Изменил переменные под себя.
jQuery.fn.initMenu = function() {
return this.each(function(){
var theMenu = $(this).get(0);
$('.sub-menu', this).hide();
$('li.expand > .sub-menu', this).show();
$('li.expand > .sub-menu', this).prev().addClass('active');
$('li a', this).click(
function(e) {
e.stopImmediatePropagation();
var theElement = $(this).next();
var parent = this.parentNode.parentNode;
if($(parent).hasClass('noaccordion')) {
if(theElement[0] === undefined) {
window.location.href = this.href;
}
$(theElement).slideToggle('normal', function() {
if ($(this).is(':visible')) {
$(this).prev().addClass('active');
}
else {
$(this).prev().removeClass('active');
}
});
return false;
}
else {
if(theElement.hasClass('sub-menu') && theElement.is(':visible')) {
if($(parent).hasClass('menu')) {
$('.sub-menu:visible', parent).first().slideUp('normal',
function() {
$(this).prev().removeClass('active');
}
);
return false;
}
return false;
}
if(theElement.hasClass('sub-menu') && !theElement.is(':visible')) {
$('.sub-menu:visible', parent).first().slideUp('normal', function() {
$(this).prev().removeClass('active');
});
theElement.slideDown('normal', function() {
$(this).prev().addClass('active');
});
return false;
}
}
}
);
});
};
$(document).ready(function() {$('.menu').initMenu();});
Почему иногда меню аккордеон раскрывается при обновлении страницы
(Ответов: 25, Просмотров: 3293)
- 16.01.2014 14:01
- Регистрация: 06.08.2013
- Сообщений: 307
- Репутация: 5
Последний раз редактировалось SergeyNetIt; 16.01.2014 в 14:56.
- 16.01.2014 14:17
Попробуйте перенести этот код в конец -поставьте его перед </body>
- 16.01.2014 14:51
- Регистрация: 06.08.2013
- Сообщений: 307
- Репутация: 5
Последний раз редактировалось SergeyNetIt; 16.01.2014 в 14:55.
- 16.01.2014 15:06
SergeyNetIt, в css пропишите скрытие пунктов меню, чтобы без скрипта меню было закрыто как нужно. Скорее всего дело в этом - когда страница загружается, то по стилям меню открыто и только потом оно закрывается скриптом.
- 16.01.2014 15:46
- Регистрация: 06.08.2013
- Сообщений: 307
- Репутация: 5
brainix,я скрыл подпункты меню с помощью css, но теперь скрипт не работает. При щелчке меню не раскрывается. Помогите, пожалуйста. Вот, то что относится к меню
/*Оформление самого левого меню подпунктов Навигация*/
/*Меню*/
.menu{
width:200px;
margin:0 auto;
/*background:url(./img/bg_menu_left.jpg);*/
background-color: #37acb0;
font: 12px Arial;
color: #fff !important;
}
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
}
ul.menu a {
display: block;
text-decoration: none;
text-align: left;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a {
padding: 0.5em;
color: #fff;
background: #33cbeb;
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
/* фон и градиент пунктов меню при наведении */
background: #169ce1;
}
/*Подпункты меню без наведения*/
ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #fff;
color: #000;
padding-left: 20px;
display: none; /*скрыл подпункты меню*/
}
/*При наведение на подпункты меню*/
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #f3ebeb;
border-left: 2px #7caa2d solid;
border-right: 2px #7caa2d solid;
padding-left: 18px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
/* фон и градиент активных пунктов меню */
text-decoration: none;
color: #faddde;
background: #7caa2d;
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}
.bottom-menu{
width:200px;
height:20px;
/*background:url(./img/bottom_menu.jpg);*/
background: url(./img/content-sprite.png) 0 -86px;
}
/*Конец меню*/
А теперь как мне с помощью верхнего скрипта menu.js сделать, чтобы меню открывалось и подпункты появлялись. А то они скрыты.Последний раз редактировалось SergeyNetIt; 16.01.2014 в 15:52.
- 16.01.2014 16:06
SergeyNetIt, столько кода скрывайте в спойлер.
Попробуйте тогда прописывать в цсс что скрывать беря прямо из скрипта. Т.е. где в скрипте есть .show() для этого тега в цсс делать скрытие.
На примере: $('li.expand > .sub-menu', this).show(); в цсс написать li.expand > .sub-menu {display:none;}
Хотя про валидность такого цсс ничего сказать не могу, я не использую такие сложности ">" - 16.01.2014 16:14
- Регистрация: 06.08.2013
- Сообщений: 307
- Репутация: 5
brainix,прописал, да, меню начало открывается с подпунктами, то все равно эффект тот же с миганием
При чем заметил только что, что если убрать подключение js слайдера, то мигание пропадает
Вот его кодPHP код:Наверное из за него. А что в нем не так. Код стандартный.(function( window, $, undefined ) {
// http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
$.fn.touchwipe = function(settings) {
var config = {
min_move_x: 20,
min_move_y: 20,
wipeLeft: function() { },
wipeRight: function() { },
wipeUp: function() { },
wipeDown: function() { },
preventDefaultEvents: true
};
if (settings) $.extend(config, settings);
this.each(function() {
var startX;
var startY;
var isMoving = false;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
}
function onTouchMove(e) {
if(config.preventDefaultEvents) {
e.preventDefault();
}
if(isMoving) {
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
var dx = startX - x;
var dy = startY - y;
if(Math.abs(dx) >= config.min_move_x) {
cancelTouch();
if(dx > 0) {
config.wipeLeft();
}
else {
config.wipeRight();
}
}
else if(Math.abs(dy) >= config.min_move_y) {
cancelTouch();
if(dy > 0) {
config.wipeDown();
}
else {
config.wipeUp();
}
}
}
}
function onTouchStart(e)
{
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
return this;
};
$.elastislide = function( options, element ) {
this.$el = $( element );
this._init( options );
};
$.elastislide.defaults = {
speed : 450, // animation speed
easing : '', // animation easing effect
imageW : 105, // the images width
margin : 15, // image margin right
border : 2, // image border
minItems : 1, // the minimum number of items to show.
// when we resize the window, this will make sure minItems are always shown
// (unless of course minItems is higher than the total number of elements)
current : 0, // index of the current item
// when we resize the window, the carousel will make sure this item is visible
onClick : function() { return false; } // click item callback
};
$.elastislide.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.elastislide.defaults, options );
// <ul>
this.$slider= this.$el.find('ul');
// <li>
this.$items = this.$slider.children('li');
// total number of elements / images
this.itemsCount = this.$items.length;
// cache the <ul>'s parent, since we will eventually need to recalculate its width on window resize
this.$esCarousel= this.$slider.parent();
// validate options
this._validateOptions();
// set sizes and initialize some vars...
this._configure();
// add navigation buttons
this._addControls();
// initialize the events
this._initEvents();
// show the <ul>
this.$slider.show();
// slide to current's position
this._slideToCurrent( false );
},
_validateOptions: function() {
if( this.options.speed < 0 )
this.options.speed = 450;
if( this.options.margin < 0 )
this.options.margin = 4;
if( this.options.border < 0 )
this.options.border = 1;
if( this.options.minItems < 1 || this.options.minItems > this.itemsCount )
this.options.minItems = 1;
if( this.options.current > this.itemsCount - 1 )
this.options.current = 0;
},
_configure: function() {
// current item's index
this.current= this.options.current;
// the ul's parent's (div.es-carousel) width is the "visible" width
this.visibleWidth= this.$esCarousel.width();
// test to see if we need to initially resize the items
if( this.visibleWidth < this.options.minItems * ( this.options.imageW + 2 * this.options.border ) + ( this.options.minItems - 1 ) * this.options.margin ) {
this._setDim( ( this.visibleWidth - ( this.options.minItems - 1 ) * this.options.margin ) / this.options.minItems );
this._setCurrentValues();
// how many items fit with the current width
this.fitCount = this.options.minItems;
}
else {
this._setDim();
this._setCurrentValues();
}
// set the <ul> width
this.$slider.css({
width : this.sliderW
});
},
_setDim : function( elW ) {
// <li> style
this.$items.css({
marginRight : this.options.margin,
width: ( elW ) ? elW : this.options.imageW + 2 * this.options.border
}).children('a').css({ // <a> style
borderWidth : this.options.border
});
},
_setCurrentValues: function() {
// the total space occupied by one item
this.itemW= this.$items.outerWidth(true);
// total width of the slider / <ul>
// this will eventually change on window resize
this.sliderW= this.itemW * this.itemsCount;
// the ul parent's (div.es-carousel) width is the "visible" width
this.visibleWidth= this.$esCarousel.width();
// how many items fit with the current width
this.fitCount= Math.floor( this.visibleWidth / this.itemW );
},
_addControls: function() {
this.$navNext= $('<span class="es-nav-next">Next</span>');
this.$navPrev= $('<span class="es-nav-prev">Previous</span>');
$('<div class="es-nav"/>')
.append( this.$navPrev )
.append( this.$navNext )
.appendTo( this.$el );
//this._toggleControls();
},
_toggleControls : function( dir, status ) {
// show / hide navigation buttons
if( dir && status ) {
if( status === 1 )
( dir === 'right' ) ? this.$navNext.show() : this.$navPrev.show();
else
( dir === 'right' ) ? this.$navNext.hide() : this.$navPrev.hide();
}
else if( this.current === this.itemsCount - 1 || this.fitCount >= this.itemsCount )
this.$navNext.hide();
},
_initEvents : function() {
var instance= this;
// window resize
$(window).bind('resize.elastislide', function( event ) {
// set values again
instance._setCurrentValues();
// need to resize items
if( instance.visibleWidth < instance.options.minItems * ( instance.options.imageW + 2 * instance.options.border ) + ( instance.options.minItems - 1 ) * instance.options.margin ) {
instance._setDim( ( instance.visibleWidth - ( instance.options.minItems - 1 ) * instance.options.margin ) / instance.options.minItems );
instance._setCurrentValues();
instance.fitCount = instance.options.minItems;
}
else{
instance._setDim();
instance._setCurrentValues();
}
instance.$slider.css({
width: instance.sliderW + 10 // TODO: +10px seems to solve a firefox "bug" :S
});
// slide to the current element
clearTimeout( instance.resetTimeout );
instance.resetTimeout = setTimeout(function() {
instance._slideToCurrent();
}, 200);
});
// navigation buttons events
this.$navNext.bind('click.elastislide', function( event ) {
instance._slide('right');
});
this.$navPrev.bind('click.elastislide', function( event ) {
instance._slide('left');
});
// item click event
this.$items.bind('click.elastislide', function( event ) {
instance.options.onClick( $(this) );
return true;//Включить или отключить переход по ссылкам
});
// touch events
instance.$slider.touchwipe({
wipeLeft : function() {
instance._slide('right');
},
wipeRight : function() {
instance._slide('left');
}
});
},
_slide: function( dir, val, anim, callback ) {
// if animating return
if( this.$slider.is(':animated') )
return false;
// current margin left
var ml= parseFloat( this.$slider.css('margin-left') );
// val is just passed when we want an exact value for the margin left (used in the _slideToCurrent function)
if( val === undefined ) {
// how much to slide?
var amount = this.fitCount * this.itemW, val;
if( amount < 0 ) return false;
// make sure not to leave a space between the last item / first item and the end / beggining of the slider available width
if( dir === 'right' && this.sliderW - ( Math.abs( ml ) + amount ) < this.visibleWidth ) {
amount = this.sliderW - ( Math.abs( ml ) + this.visibleWidth ) - this.options.margin; // decrease the margin left
// show / hide navigation buttons
this._toggleControls( 'right', -1 );
this._toggleControls( 'left', 1 );
}
else if( dir === 'left' && Math.abs( ml ) - amount < 0 ) {
amount = Math.abs( ml );
// show / hide navigation buttons
this._toggleControls( 'left', -1 );
this._toggleControls( 'right', 1 );
}
else {
var fml; // future margin left
( dir === 'right' )
? fml = Math.abs( ml ) + this.options.margin + Math.abs( amount )
: fml = Math.abs( ml ) - this.options.margin - Math.abs( amount );
// show / hide navigation buttons
if( fml > 0 )
this._toggleControls( 'left', 1 );
else
this._toggleControls( 'left', -1 );
if( fml < this.sliderW - this.visibleWidth )
this._toggleControls( 'right', 1 );
else
this._toggleControls( 'right', -1 );
}
( dir === 'right' ) ? val = '-=' + amount : val = '+=' + amount
}
else {
var fml = Math.abs( val ); // future margin left
if( Math.max( this.sliderW, this.visibleWidth ) - fml < this.visibleWidth ) {
val = - ( Math.max( this.sliderW, this.visibleWidth ) - this.visibleWidth );
if( val !== 0 )
val += this.options.margin; // decrease the margin left if not on the first position
// show / hide navigation buttons
this._toggleControls( 'right', -1 );
fml = Math.abs( val );
}
// show / hide navigation buttons
if( fml > 0 )
this._toggleControls( 'left', 1 );
else
this._toggleControls( 'left', -1 );
if( Math.max( this.sliderW, this.visibleWidth ) - this.visibleWidth > fml + this.options.margin )
this._toggleControls( 'right', 1 );
else
this._toggleControls( 'right', -1 );
}
$.fn.applyStyle = ( anim === undefined ) ? $.fn.animate : $.fn.css;
var sliderCSS= { marginLeft : val };
var instance= this;
this.$slider.applyStyle( sliderCSS, $.extend( true, [], { duration : this.options.speed, easing : this.options.easing, complete : function() {
if( callback ) callback.call();
} } ) );
},
_slideToCurrent: function( anim ) {
// how much to slide?
var amount = this.current * this.itemW;
this._slide('', -amount, anim );
},
add : function( $newelems, callback ) {
// adds new items to the carousel
this.$items = this.$items.add( $newelems );
this.itemsCount = this.$items.length;
this._setDim();
this._setCurrentValues();
this.$slider.css({
width : this.sliderW
});
this._slideToCurrent();
if ( callback ) callback.call( $newelems );
},
destroy : function( callback ) {
this._destroy( callback );
},
_destroy : function( callback ) {
this.$el.unbind('.elastislide').removeData('elastislide');
$(window).unbind('.elastislide');
if ( callback ) callback.call();
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.elastislide = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'elastislide' );
if ( !instance ) {
logError( "cannot call methods on elastislide prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for elastislide instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'elastislide' );
if ( !instance ) {
$.data( this, 'elastislide', new $.elastislide( options, this ) );
}
});
}
return this;
};
})( window, jQuery );
Последний раз редактировалось SergeyNetIt; 16.01.2014 в 16:22.
- 16.01.2014 16:23
код скрипта ужасен, для аккордеона надо то 5 строчек возьмите мой тут для меню навигации в левой колонке http://jsfiddle.net/codeffeiner/2KJmr/
- 16.01.2014 16:35
- Регистрация: 06.08.2013
- Сообщений: 307
- Репутация: 5
_Серега_,а как сделать, чтобы при щелчке обратно на пункт меню он закрывался?
- 16.01.2014 20:19
SergeyNetIt, добавилось условие else проапдейтил на фидле
PHP код:$(function initMenu() {
$('.nav ul').hide();
$('.nav li.kind b').click(function (e) {
var checkElement;
checkElement = $(this).next();
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
e.preventDefault();
$('.nav ul:visible').slideUp('slow');
checkElement.slideDown();
} else {
e.preventDefault();
checkElement.slideUp('slow');
}
});
});
Последний раз редактировалось _Серега_; 16.01.2014 в 20:23.
Спасибо сказали:
SergeyNetIt(16.01.2014),
Тэги топика:
- checkelement,
- codeffeiner,
- echo,
- function,
- javascript,
- joxi,
- jsfiddle,
- preventdefault,
- slideup,
- slow,
- visible,
- аккордеон,
- быть,
- задать,
- закрываться,
- иногда,
- меню,
- меню аккордеон,
- можно,
- надо,
- нужный,
- обновление,
- переменная,
- переход,
- подпункт,
- почему,
- пункт,
- раскрываться,
- сделать,
- ссылка,
- страница,
- щелчок
Похожие темы
Темы | Раздел | Ответов | Последний пост |
---|---|---|---|
Почему сайдбар с меню не корректно отображается в IE8 | WordPress | 1 | 24.12.2013 13:07 |
Почему на старом сайте новые страницы попадают в сопли? | Общие вопросы поисковой оптимизации | 5 | 31.10.2013 11:47 |
Нужно немного изменить скрипт аккордеон-меню | Софт, скрипты, сервисы | 2 | 20.03.2012 00:01 |
Ссыла из рубрики в меню страницы сайта | Web программирование | 5 | 28.02.2012 01:58 |