Разварачивание строк в таблице на jQyery

[Suharik]

Всем привет. Нашел один скриптик котрый разварачивает строки в таблице и снова сварачивает при клике.

<script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>

Я его немного переделать для того чтобы строки раздвигались при наведении мыши:

<script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").mouseover(function(){
                $(this).next("tr").toggle();
			
                $(this).find(".arrownext").toggleClass("up");
            });
			$("#report tr.odd").mouseout(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrownext").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>

Но только работает это не так как хочется. При наведении на строку она все таки раздвигается, но если навести на тот див который развернулся, то все сварачивается и назварачивается див другой строки. Как можно поступить? Вот ссылка на сам скрипт http://ruseller.com/lessons.php?rub=32&id=346 а вот ссылка на то как у меня получилось http://locmankvartir.ru/search_obj (естестввенно смотреть в таблице)

[Suharik]

Да. Сама задача вот в чем))) Нужно чтобы при наведении на открывающийся див, он не сварачивался.

[Suharik]

Как я понял подсказать никто не может. Может тогда кто знает как сделать аккордион без дивов в таблице

<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "a" });
				
		
				
			});
		</script>

<div id="accordion">
			<div>
				<a href="#">First</a>
				<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
			</div>
			<div>
				<a href="#">Second</a>
				<div>Phasellus mattis tincidunt nibh.</div>
			</div>
			<div>
				<a href="#">Third</a>
				<div>Nam dui erat, auctor a, dignissim quis.</div>
			</div>
		</div>

Как вместо дивов сделать все это в table tr td

[e1f]

http://mediaformations.com/accordion...s-with-jquery/

[Suharik]

это не пойдет. С таким же успехом я мог бы просто зацикленной таблицы присвоить уникальный ID и просто обычним кодом открывать и закрывать. примерно так.

openDiv = function (id) {
    document.getElementById(id).style.display = 'block';
};

closeDiv = function (id) {
    document.getElementById(id).style.display = 'none';
};

И дальше онкликом или онмаусом открывать и закрывать.
Мне хочется чтобы был реальный аккордион чтобы красиво открывал див))

[e1f]

<script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").mouseover(function(){
                $(this).next("tr").toggle();
			
                $(this).find(".arrownext").toggleClass("up");
            });
			$("#report tr.odd").mouseout(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrownext").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>

А если вместо mouseover/out использовать mouseenter/mouseleave?

а вот ссылка на то как у меня получилось http://locmankvartir.ru/search_obj (естестввенно смотреть в таблице)

Что-то там в таблице квартир нет никакого фолдинга, или я не туда смотрел?

[Suharik]

да я убрал пока. Сейчас попробую и отпишу

[Suharik]

Не помогло к сожалению. Код пока не убераю. Посмотрите.

[e1f]

$('#report tr.odd').bind('mouseenter mouseleave', function(e) {
    var self = $(this),
        next = self.next();

    if (next[0] === $(e.relatedTarget).closest('tr')[0]) {
        return;
    }

    next.toggle();
    self.find('.arrownext').toggleClass('up');
});

$('#report tr:not(.odd)').bind('mouseenter mouseleave', function(e) {
    var self = $(this),
        prev = self.prev();

    if (prev[0] === $(e.relatedTarget).closest('tr')[0]) {
        return;
    }
    
    self.toggle();
    prev.find('.arrownext').toggleClass('up');
});

P.S. У Вас какая-то трабла с раскраской таблицы. Она сто старта вся серая, а потом по наведению "зебреет" потихоньку.

[Suharik]

Да, там просто еще один скриптик конфликтует)) про это я вкурсе))