Question

我提前感谢你阅读我的问题。

我是任何编程语言的新手。我写了一些jQuery函数，每个div框打开并在单击时关闭。

我的想法是编写代码，只要div打开所有其他div关闭就会运行。它非常实用，但我的代码现在太乱了。我想知道是否有人可以给我一些关于清理这个烂摊子的建议。

$(document).ready(function(){
var open_footer = 'click to hide';
var close_footer = 'click to see detail';

$('.text_area').hide();
$('.text_area>img').remove(); 
$('.click_me:eq(0)').click(function(){

    $(this).next('.text_area').slideToggle(100, function(){
    if($(this).is(':visible')){
    $('.text_area:eq(1)').hide(); $('.text_area:eq(2)').hide()
       $('.text_area:eq(3)').hide();
    $('#article_footer1').text(open_footer);
    $('#article_footer2').text(close_footer);

    $('#article_footer3').text(close_footer);$('#article_footer4').text(close_footer);
    $('.text_area:eq(0)').append('<img class="text_area_img" src="Hicks_Nat.jpg" "no-repeat"/>');
    $('.text_area:eq(1)>img').remove();$('.text_area:eq(2)>img').remove();$('.text_area:eq(3)>img').remove();
    } else if ($(this).is(':hidden')){

        $('#article_footer1').text(close_footer);
        $('.text_area:>img').remove();
        }
    });
});

这是一个代码块，我基本上还有3个类似的块。无论如何我可以简化这个吗？

编辑/这是CSS

 .click_me{
display: block;
display: none;

padding:10px;
width: 550px;
float:left;
margin-top:15px;
margin-left: 25px;
height: 75px;
overflow: hidden;
position: relative;
background:radial-gradient(center,circle,#EEEEE0 50%, white 80%);
opacity: 1;
border-radius:10px;
border: 1px solid silver;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow:#999 2px 0px 3px;
box-shadow:rgb(110,110,110) 6px 6px 4px;
 }
.click_me:hover{
background: #DCDCDC;
 }
 .text_area{
font-family:arial;
font-weight: bold;
font-size: 14px;
text-align:left;
background:white;
border: 1px solid silver;
border-radius: 10px;
box-shadow:#999 2px 0px 3px;
margin-top:10px;
padding: 10px;
float:right;
max-height: 600px;
width: 500px;
overflow: auto;

}

Answer 1

清理代码的方法主要是使用CSS。因为我不知道你的代码是什么样的，所以我做了一些猜测。我没有完成这个，但是要点就在那里，应该让你开始缩短/清理代码：

CSS

.hidden {
    display: none;
}

.openText:after {
    content: "click to hide";
}

.closeText:after {
    content: "click to see detail";
}

HTML

<div class="section hidden" style="border: 2px solid orange; padding: 3px;">
    <text-area class="text_area">First</text-area>
    <p>Some more text here or images or whatever</p>
</div>
<footer class="click_me article_footer"></footer>
<div class="section hidden" style="border: 2px solid orange; padding: 3px;">
    <text-area class="text_area">Second</text-area>
    <p>Some more text here for section 2</p>
</div>
<footer class="click_me article_footer"></footer>
<div class="section hidden" style="border: 2px solid orange; padding: 3px;">
    <text-area class="text_area">Third</text-area>
    <p>Section 3 additional stuff.</p>
</div>
<footer class="click_me article_footer"></footer>

JAVASCRIPT：

$(document).ready(function(){
    function myToggle(ele) {
        $(ele).prev('div').toggleClass('hidden');
        $(ele).toggleClass('openText closeText');
    };

    $('.article_footer').addClass('closeText');
    $('.click_me').click(function() {
        var triggerElem = this;
        $('.openText').each(function() {
            if (this != triggerElem) {
                myToggle(this);
            }
        });
        myToggle(this);
    });
});

使这个slideToggle功能更清洁

1 个答案: