jQuery & CSS - ลบ / เพิ่มการแสดงผล: ไม่มี

ฉันมี div ในคลาสนี้:

.news{
  width:710px; 
  float:left;
  border-bottom:1px #000000 solid;
  font-weight:bold;
  display:none;
}

และฉันต้องการใช้วิธี jQuery บางอย่างลบการแสดงผลนั้น: ไม่มี; (ดังนั้น div จะแสดง) และเพิ่มอีกครั้ง (ดังนั้น div จะเป็นเงา)

ฉันจะทำมันได้อย่างไร? ไชโย

เพื่อซ่อนไฟล์ div

$('.news').hide();

หรือ

$('.news').css('display','none');

และเพื่อแสดงdiv:

$('.news').show();

หรือ

$('.news').css('display','block');

jQuery ให้คุณ:

$(".news").hide();
$(".news").show();

จากนั้นคุณสามารถแสดงและซ่อนองค์ประกอบได้อย่างง่ายดาย

ขอฉันให้รหัสตัวอย่าง:

<div class="news">
Blah, blah, blah. I'm hidden.
</div>

<a class="trigger">Hide/Show News</a>

ลิงก์จะเป็นทริกเกอร์เพื่อแสดง div เมื่อคลิก ดังนั้น Javascript ของคุณจะเป็น:

$('.trigger').click(function() {
   $('.news').toggle();
});

คุณมักจะดีกว่าที่จะปล่อยให้ jQuery จัดการรูปแบบสำหรับการซ่อนและแสดงองค์ประกอบ

แก้ไข:ฉันเห็นคนข้างบนแนะนำให้ใช้.showและ.hideสำหรับสิ่งนี้ .toggleให้คุณทำทั้งสองอย่างด้วยเอฟเฟกต์เดียว มันเจ๋งมาก

ใน JavaScript:

getElementById("id").style.display = null;

ใน jQuery:

$("#id").css("display","");

ใช้สลับเพื่อแสดงและซ่อน

$('#mydiv').toggle()

ตรวจสอบตัวอย่างการทำงานที่http://jsfiddle.net/jNqTa/

ฉันขอแนะนำให้เพิ่มคลาสเพื่อแสดง / ซ่อนองค์ประกอบ:

.hide { display:none; }

จากนั้นใช้ . toggleClass ()ของ jquery เพื่อแสดง / ซ่อนองค์ประกอบ:

$(".news").toggleClass("hide");

วิธีเดียวที่จะลบ "display: none" แบบอินไลน์ผ่าน css-api ของ jQuery คือการรีเซ็ตด้วยสตริงว่าง ( nullไม่ได้ผล btw !!)

ตาม jQuery docu นี่เป็นวิธีทั่วไปในการ "ลบ" คุณสมบัติสไตล์อินไลน์ที่ตั้งค่าครั้งเดียว

$("#mydiv").css("display","");

หรือ

$("#mydiv").css({display:""});

ควรทำเคล็ดลับอย่างถูกต้อง

IMHO มีวิธีการที่ขาดหายไปใน jQuery ซึ่งอาจเรียกได้ว่า "ยกเลิกการซ่อน" หรือ "เปิดเผย" ซึ่งแทนที่จะเพียงแค่ตั้งค่าคุณสมบัติสไตล์อินไลน์อื่นจะไม่ตั้งค่าการแสดงผลอย่างถูกต้องตามที่อธิบายไว้ข้างต้น หรืออาจจะhide()ควรเก็บค่าอินไลน์เริ่มต้นและshow()ควรเรียกคืนสิ่งนั้น ...

ฟังก์ชั่น .how () และ. ซ่อน () ของ jQuery น่าจะเป็นทางออกที่ดีที่สุดของคุณ

คุณไม่ได้ให้ข้อมูลกับเรามากนัก แต่โดยทั่วไปนี่อาจเป็นวิธีแก้ปัญหา:

$("div.news").css("display", "block");

ด้วยเหตุผลบางประการการสลับใช้งานไม่ได้สำหรับฉันและฉันได้รับข้อผิดพลาดuncaught type error toggle is not a functionเมื่อตรวจสอบองค์ประกอบในเบราว์เซอร์ ดังนั้นฉันจึงใช้รหัสต่อไปนี้และมันก็เริ่มทำงานให้ฉัน

$(".trigger").click(function () {
    $('.news').attr('style', 'display:none');
})

jQuery jquery-2.1.3.min.jsมือสองแฟ้มสคริปต์

หากคุณมีองค์ประกอบจำนวนมากที่คุณต้องการ.hide()หรือ.show()คุณจะเสียทรัพยากรจำนวนมากเพื่อทำสิ่งที่คุณต้องการแม้ว่าจะใช้.hide(0)หรือ.show(0)- พารามิเตอร์ 0 คือระยะเวลาของภาพเคลื่อนไหวก็ตาม

ซึ่งตรงข้ามกับPrototype.js .hide()และ.show()วิธีการที่ใช้เฉพาะในการจัดการแอตทริบิวต์การแสดงผลขององค์ประกอบjQueryมาใช้นั้นซับซ้อนกว่าและไม่แนะนำสำหรับองค์ประกอบจำนวนมาก

ในกรณีนี้คุณควรพยายาม.css('display','none')ซ่อนและ.css('display','')แสดง

.css('display','block') ควรหลีกเลี่ยงโดยเฉพาะอย่างยิ่งหากคุณกำลังทำงานกับองค์ประกอบแบบอินไลน์แถวของตาราง (จริงๆแล้วองค์ประกอบตารางใด ๆ ) เป็นต้น

เมื่อพิจารณาถึงความคิดเห็นของ lolesque เพื่อเป็นคำตอบที่ดีที่สุดคุณสามารถเพิ่มแอตทริบิวต์หรือคลาสเพื่อแสดง / ซ่อนองค์ประกอบที่มีคุณสมบัติการแสดงผลที่แตกต่างจากที่มีอยู่โดยปกติหากไซต์ของคุณต้องการความเข้ากันได้แบบย้อนกลับฉันขอแนะนำให้สร้างคลาสและเพิ่ม / ลบเพื่อแสดง / แสดงองค์ประกอบ

.news-show {
display:inline-block;
}

.news-hide {
display:none;
}

แทนที่อินไลน์บล็อกด้วยวิธีการแสดงที่คุณต้องการและใช้ jquerys addclass https://api.jquery.com/addclass/และ removeclass https://api.jquery.com/removeclass/แทนการแสดง / ซ่อนหากย้อนกลับ ความเข้ากันได้ไม่มีปัญหาคุณสามารถใช้แอตทริบิวต์เช่นนี้ได้

.news[data-news-visible=show] {
display:inline-block;
}

.news[data-news-visible=hide] {
display:none;
}

และใช้ jquerys attr () http://api.jquery.com/attr/เพื่อแสดงและซ่อนองค์ประกอบ

วิธีใดก็ตามที่คุณต้องการทำให้คุณสามารถใช้แอนิเมชั่น css3 ได้อย่างง่ายดายเมื่อแสดง / ซ่อนองค์ประกอบด้วยวิธีนี้

การใช้การshow()เพิ่มdisplay:blockในตำแหน่งdisplay:hideที่อาจทำให้สิ่งต่างๆเสียหาย

เพื่อหลีกเลี่ยงการที่คุณจะได้เรียนกับอสังหาริมทรัพย์และสลับชั้นเรียนที่องค์ประกอบที่ว่าด้วยdisplay:nonetoggleClass()

$("button").on('click', function(event){  $("div").toggleClass("hide"); });

.hide{
   display:none;
}

div{
   width:40px;
   height:40px;
   background:#000;
   margin-bottom:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
<button>Toggle Box</button>

ไม่มีคำตอบใดที่กล่าวถึงเรื่องนี้