Показать / скрыть содержание сообщений с jquery - PullRequest
Новая
       40

Показать / скрыть содержание сообщений с jquery

0 голосов
/ 28 марта 2011

Используя цикл wordpress и jquery, я пытаюсь показать / скрыть содержимое отображаемых сообщений. Пример: пользователь щелкает заголовок и теги, затем щелкает, и содержимое раскрывается.

После некоторых поисков я пришел к этому результату. 

$f(function(){
    $f(".portfolio-destaques").hover(function(){
        $f( ".change" ).toggle(
            function() {
                $f('.highlight').slideUp('fast');
            },
            function() {
                $f('.highlight').slideDown('fast');
            });
    });
});

Это почти работает. Первый пост работает нормально, но второй пост расширяет содержание первого и второго поста. И это не мешает показывать / скрывать. Контент, кажется, прыгает! .. странные вещи .. О! Просто заметил, что эти «скачки» являются инкрементными, начинаются с 1, затем 2, затем 3, ...

Заранее спасибо! (И прошу прощения за любую ошибку в моем английском.)

Dani

Edit: Вот HTML 

<div id="portfolioContent">
    <div class="portfolio-destaques">
        <p class="destaques-data">2010-03-10</p>
        <h3><a href="#" class="change">Mauris aliquet mattis metus</a></h3>
        <p>Requerente: <a href="http://localhost:8888/aspp/requerente/ornare/" rel="tag">Ornare</a> <a href="http://localhost:8888/aspp/requerente/pede/" rel="tag">Pede</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/amet/" rel="tag">Amet</a> <a href="http://localhost:8888/aspp/tipologia/elit/" rel="tag">Elit</a></p>
        <div class="highlight">
            <p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non, auctor dapibus, pede.</p>
        </div>
    </div>
    <div class="portfolio-destaques">
        <p class="destaques-data">2006-11-08</p>
        <h3><a href="#" class="change">Cras aliquam massa ullamcorper sapien</a></h3>
        <p>Requerente: <a href="http://localhost:8888/aspp/requerente/enim/" rel="tag">Enim</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/ipsum/" rel="tag">Ipsum</a></p>
        <div class="highlight">
            <p>Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p>
        </div>
    </div>

И CSS: 

#portfolioContent {
    position: absolute;
    top: 20px;
    right: 60px;
    width: 670px;
}
.portfolio-destaques {
    position: relative;
    background: transparent url('images/menu_bg_dark.png');
}
.portfolio-destaques:hover {
    background: transparent url('images/menu_bg.png');
}

Ответы [ 4 ]

4 голосов
/ 28 марта 2011

Теперь вы скользите вверх / вниз по всем элементам с помощью классов .highlight и .change. Вы, вероятно, просто хотите выбрать соответствующий элемент. Вы можете использовать обходные методы, такие как closest () или расширенные селекторы, чтобы получить правильный элемент, или вы можете добавить идентификатор записи или инкрементную переменную, чтобы сделать класс уникальным, или использовать уникальный идентификатор вместо этого.

Обновление: для отправленного вами HTML-кода это должно работать: 

$f(function(){
    $f(".change" ).toggle(
        function() {
            $f(this).parents(".portfolio-destaques").children('.highlight').slideUp('fast');
        },
        function() {
            $f(this).parents(".portfolio-destaques").children('.highlight').slideDown('fast');
        }
    );
});
1 голос
/ 28 марта 2011

Это работает для меня: 

jQuery(document).ready(function($){

   $(".entry-content").hide();

   $(".entry-title").click(function(){

$(this).parent().children(".entry-content").toggle("slide", {direction: "up"}, 500);})
});

И (в цикле WP; при необходимости измените HTML и CSS): 

<div class="entry-post">

<h1 class="entry-title"><?php the_title(); ?></h1>

<div class="thedate"><?php the_time('F jS, Y') ?></div>

<div class="entry-content"><?php the_content(); ?></div></div>

В основном из http://pancaketheorem.com/hideshow-wordpress-post-content-when-clicking-post-title-with-jquery/

0 голосов
/ 28 марта 2011

Попробуйте: 

$f('.portfolio-destaques').hover(function(){
    $f(this).find('.highlight').slideUp('fast');
},function(){
    $f(this).find('.highlight').slideDown('fast');
})

Это может сработать в вашей ситуации, я надеюсь, что так ... удачи

0 голосов
/ 28 марта 2011

Когда вы используете $f( ".change" ).toggle и $f('.highlight').slideUp('fast'), вы заставляете jQuery выполнять эти методы на всех элементах, к которым применены классы «.change» и «.highlight».Вместо этого вы должны использовать что-то вроде этого: 

$(this).find(".change").toggle

В любом случае вы должны играть с $ (this) для достижения необходимого результата.

...