Закрытие ссылки в теге div

Question

Мне нужна помощь с закрытием тега div, который был расширен с помощью jquery, когда была нажата ссылка «читать дальше».

Я могу заставить его работать, но не все остальное.

Я приложил скрипку моего кода: http://jsfiddle.net/R9LvG/

Это первый раз, когда я когда-либо использовал JQuery, и я очень новый так, пожалуйста, медведь со мной.

$(document).ready(function() { 
    $(".clickme").click(function() { 
     $(".content").slideToggle("slow") 
    }); 
}); 
$(document).ready(function() { 
    $(".close").click(function() { 
     $(".content").slideToggle("slow") 
    }); 
}); 

$(document).ready(function() { 
    $(".clickme2").click(function() { 
     $(".content2").slideToggle("slow") 
    }); 
}); 

$(document).ready(function() { 
    $(".clickme3").click(function() { 
     $(".content3").slideToggle("slow") 
    }); 
}); 

$(document).ready(function() { 
    $(".clickme4").click(function() { 
     $(".content4").slideToggle("slow") 
    }); 
}); 

$(document).ready(function() { 
    $(".clickme5").click(function() { 
     $(".content5").slideToggle("slow") 
    }); 
}); 
$(document).ready(function() { 
    $(".close").click(function() { 
     $(".content").slideToggle("slow") 
    }); 
}) 

Answer 1

$(document).ready(function() { 
$(".clickme").click(function() { 
    $(".content").slideToggle("slow") 
}); 
$(".clickme2").click(function() { 
    $(".content2").slideToggle("slow") 
}); 
$(".clickme3").click(function() { 
    $(".content3").slideToggle("slow") 
}) 
$(".clickme4").click(function() { 
    $(".content4").slideToggle("slow") 
}); 
$(".clickme5").click(function() { 
    $(".content5").slideToggle("slow") 
}); 
$(".close").click(function() { 
    $(".content").slideToggle("slow") 
}); 

}); 

JsFiddle

также:

удалить '#' HREF, чтобы предотвратить его от прыжков в верхней части страницы, когда она нажата

<a class="clickme"><u><b>Read more</b></u></a> 

Для ваш clickme css класс:

.clickme{cursor:poniter} 

, а затем добавить событие парения:

.clickme:hover{color:#F00} 

Answer 2

закрыть его 2 раза, что означает, что он открывает снова

Удалить это в конце

$(document).ready(function() { 
    $(".close").click(function() { 
    $(".content").slideToggle("slow") 
    }); 
}) 

Answer 3

Дон» t использовать функции, поддерживающие dom, больше раз на одной странице.

Использование Мультиселектор для функций щелчка

Примеры

$(document).ready(function() { 
$("#selector1,#selector2, ... #selector-n").click(function() { 
    $(".content").slideToggle("slow") 
}); 

Answer 4

Пожалуйста, используйте только один

$(document).ready(function() { 


$(".clickme2, .clickme3, .clickme4, .clickme5").click(function() { 
    $(this).slideToggle("slow"); 


}); 

Answer 5

Как все те части кода херово, я хотел бы использовать:

$(document).ready(function() { 
    $('[class^="clickme"]').click(function (e) { 
    e.preventDefault(); 
    $(this).next().slideToggle("slow"); 
    }); 
}); 

Упрощенный, очиститель. :)

Answer 6

Я не нашел в тебе никаких проблем.
Вы изменяете вкладку привязки, удаляя элемент href = "", это предотвратит перемещение страницы вверх при каждом нажатии на Подробнее.

<a class="clickme2" ><u><b>Read more</b></u></a> 

и включить сценарий JQuery в вас странице, Копирующие ниже содержание вашей страницы,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 

И вы можете обновить скрипт для расширения и сжатия, как показано ниже, так как вы имеете дело с различной дивой с различными классами,

<script> 

$(document).ready(function() { 
    $(".clickme").click(function() { 
     $(".content").slideToggle("slow") 
    }); 

    $(".close").click(function() { 
     $(".content").slideToggle("slow") 
    }); 
    $(".clickme2").click(function() { 
     $(".content2").slideToggle("slow") 
    }); 

    $(".clickme3").click(function() { 
     $(".content3").slideToggle("slow") 
    }); 

    $(".clickme4").click(function() { 
     $(".content4").slideToggle("slow") 
    }); 

    $(".clickme5").click(function() { 
     $(".content5").slideToggle("slow") 
    }); 

    $(".close").click(function() { 
     $(".content").slideToggle("slow") 
    }); 
}) 
</script>