0

私の質問を読んでくれてありがとう。

私はどのプログラミング言語も初めてです。クリックすると各divボックスが開閉するjQuery関数を作成しました。

私の考えは、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();
        }
    });
});

これはコードの 1 つのブロックであり、基本的にさらに 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;

}

4

1 に答える 1

0

コードをクリーンアップする方法は、主に 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>

ジャバスクリプト:

$(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);
    });
});
于 2012-07-26T21:21:55.163 に答える