[Aminمشارکت کننده]

سلام امکانش هست یه کد بدید که برای باکس متن باشه که با کلیک روش بازشه و بسته بشه.

[سعید شعبانیسرپرست کل]

درود بر شما

برای این کار می تونید از جی کوئری کمک بگیرید. به این شکل که کل بخش مورد نظر که دکمه هم داخل اون قرار داره را در یک div با یک class خاص مثل box قرار بدید. بعد با استفاده از کد زیر در زمان کلیک کردن کاربر بر روی دکمه با کلاس but کلاس active را به اون بخش اختصاص بدید. بعد با CSS خیلی راحت می تونید اون بخش را در زمانی که کلاس active داره پنهان کنید.

$( ".but" ).click(function() {     
    if( $('.box').hasClass('active') ){
        $('.box').removeClass('active');
    }else{
        $('.box').addClass('active');
    }
});

[Aminمشارکت کننده]

این پاسخ به عنوان خصوصی علامتگذاری شده است.

[سعید شعبانیسرپرست کل]

داداش باید خودتون هم حداقل یکم تلاش کنید تا یاد بگیرید، کار سختی نیست. ما با استفاده از فریمورک JQuery در بالا اومدیم و به یه باکس که یه دکمه داخلش قرار داره گفتیم که با زدن دکمه، کلاس active را به باکس بده و با زدن مجدد همون دکمه این کلاس را ازش بگیره خوب ساختار html را هم به شکل زیر می تونیم بنویسیم.

<div class="box">
<span class="but">دکمه</span>
<p>این هم یک متن دلخواه هست</p>
</div>

خوب تا اینجا بخش زیادی از کار را پیش بردیم، حالا فقط مونده از CSS برای پنهان کردن و نمایش دادن محتوای جعبه استفاده کنیم، من در اینجا یک کد ساده می نویسم که با زدن دکمه حالت نمایش متن تغییر کنه.

.box p{
  display: none;
}
.box.active p{
  display: block;
}

[Aminمشارکت کننده]

این پاسخ به عنوان خصوصی علامتگذاری شده است.

[سعید شعبانیسرپرست کل]

داداش نگاه کن من داخل این تاپیک تا اینجا سه تا بخش کد را قرار دادم، کد اول مربوط به jQuery هست، کد دوم مربوط به HTML و کد سوم هم مربوط به CSS هست. این کد ها مکمل هم هستند. شما ابتدا باید کد html را داخل فایل های قالب قرار بدید، بعد داخل فایل style قالب کد CSS را بگذارید و در انتها هم برای فعال شدن قابلیت عملکرد دکمه باید کد های jQuery را فایل قالب یا اینکه در یک فایل جداگانه Js قرار بدید.

[Aminمشارکت کننده]

ببخشید فایل html و query کجای قالب قرار بدم دقیقا کدوم فایل؟

[سعید شعبانیسرپرست کل]

نگاه کنید کد های html را باید داخل یکی از فایل های قالب قرار بدید که می خواهید باکس متن داخل اون دیده شود. مثلا اگر بخواهید در همه صفحات باکس متن باشه می تونید کد های html را در فایل header.php قرار دهید. البته در برخی از قالب ها ساختار قالب به شکلی هست که باید کد های html را در فایل دیگری قرار دهید.

کد های JQuery هم می تونید بین تگ باز و بسته script مثل زیر در فایل header قبل از بسته شدن تگ head قرار دهید.

<script>
$( ".but" ).click(function() {     
    if( $('.box').hasClass('active') ){
        $('.box').removeClass('active');
    }else{
        $('.box').addClass('active');
    }
});
</script>

قبل از اجرای کد های JQuery هم حتما باید فایل فریم ورک JQuery در قالب لود شده باشد، در اکثر قالب ها این فایل قبل از بسته شدن تگ head لود می شود.

کدهای CSS هم می تونید در انتهای فایل style.css قرار دهید.

[Aminمشارکت کننده]

این پاسخ به عنوان خصوصی علامتگذاری شده است.

[سعید شعبانیسرپرست کل]

این کار را باید با css انجام بدید، مثلا برای قرار دادن تصویر می تونید از خاصیت background در CSS استفاده کنید. مثلا به شکل زیر :

.but{
background: url("but.png") no-repeat;
width : 20px;
height: 10px;
}

[Aminمشارکت کننده]

سلام مرسی حل شد فقط چی کار کنم پشت زمینه سفیدی که قبل از باز کردن هست نیاد و وقتی باز شد با اندازه ی دلخواه باز شه.؟

[سعید شعبانیسرپرست کل]

فکر کنم شما به div ای که کلاس box داره پس زمینه سفید دادید. شما می تونید به تگ p یا هر تگ دیگه ای که در کلاس box قرار داره و در زمان فعال نبودن دکمه پنهان هست یک کلاس دلخواه بدید و پس زمینه را به اون کلاس دلخواه اختصاص بدید نه خود box , عرض دلخواهتون را هم می تونید به همین کلاس جدید بدید.

[Aminمشارکت کننده]

این پاسخ به عنوان خصوصی علامتگذاری شده است.

[Aminمشارکت کننده]

این پاسخ به عنوان خصوصی علامتگذاری شده است.

[Aminمشارکت کننده]

فکر کنم مشکل از کد وقتی کد html رو میزاری این مشکل پیش میاد من هر کاری می کنم دریت نمیشه

[نویسنده]

نوشته ها