ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์CMS & Free Scriptลองใช้โค้ดสำหรับซ่อน/แสดงข้อความ แล้วมันปัดลงบรรทัดใหม่
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ลองใช้โค้ดสำหรับซ่อน/แสดงข้อความ แล้วมันปัดลงบรรทัดใหม่  (อ่าน 1149 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
hackz
Newbie
*

พลังน้ำใจ: 10
ออฟไลน์ ออฟไลน์

กระทู้: 73



ดูรายละเอียด
« เมื่อ: 12 มีนาคม 2017, 16:06:17 »

สวัสดีค่ะ

รบกวนเพื่อนๆ ช่วยดูโค้ดเหล่านี้ให้หน่อยค่ะ

https://jsfiddle.net/pu5k8zee/

หากไม่สะดวกเข้าเว็บนั้น โค้ดตามนี้ค่ะ
โค๊ด:
สำนักข่าวต่างประเทศรายงาน <div class="spoil">
<div>
<span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {&nbsp;&nbsp;this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<a href=\'javascript:void(0);\' onClick=\'return false;\' style=\'color: #FF0000;\'>ซ่อนข้อความ</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<a href=\'javascript:void(0);\' onClick=\'return false;\' style=\'color: #FF0000;\'>ดูข้อความ</a>'; }" />
<a href="javascript:void(0);" onClick="return false;" style="color: #FF0000;">ดูข้อความ</a>
</span>
</div>
<div>
<div style="border: dashed 1px #000000;display: none;">วันที่ 12 มี.ค. ว่า ฉิน เช็ง กองกลางหัวร้อนของทีม เซี่ยงไฮ้ เสิ่นหัว ก่อวีรกรรมสุดน่าเกลียดในเกมลีกนัดล่าสุด เมื่อจงใจย่ำเท้าของ
</div>
</div>
</div>
 อักเซล วิตเซล อย่างสุดน่าเกลียด จนโดนผู้ตัดสินชูใบแดงไล่ออกจากสนาม

เราอยากให้ข้อความมันไปอยู่บรรทัดเดียวกันทั้งหมด ไม่ต้องปัดลงมา

ตอนนี้คำว่า "ดูข้อความ" มันปัดลงมาบรรทัดใหม่เลยค่ะ อยากให้อยู่บรรทัดเดียวยาวๆ ไปเลย

เราเข้าใจว่าเป็นเพราะมีการใช้แท็ก div เลยเป็นแบบนั้น แต่พอจะมีวิธีการแก้ไขไหมคะ

รบกวนด้วยค่ะ
บันทึกการเข้า
zankumuro
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 113
ออฟไลน์ ออฟไลน์

กระทู้: 1,036



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 12 มีนาคม 2017, 22:05:37 »

โค๊ด:
สำนักข่าวต่างประเทศรายงาน <div class="spoil" style="display: inline;">
<div style="display: inline;">
<span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {&nbsp;&nbsp;this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<a href=\'javascript:void(0);\' onClick=\'return false;\' style=\'color: #FF0000;\'>ซ่อนข้อความ</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<a href=\'javascript:void(0);\' onClick=\'return false;\' style=\'color: #FF0000;\'>ดูข้อความ</a>'; }" />
<a href="javascript:void(0);" onClick="return false;" style="color: #FF0000;">ดูข้อความ</a>
</span>
</div>
<div>
<div style="border: dashed 1px #000000;display: none;">วันที่ 12 มี.ค. ว่า ฉิน เช็ง กองกลางหัวร้อนของทีม เซี่ยงไฮ้ เสิ่นหัว ก่อวีรกรรมสุดน่าเกลียดในเกมลีกนัดล่าสุด เมื่อจงใจย่ำเท้าของ
</div>
</div>
</div>
 อักเซล วิตเซล อย่างสุดน่าเกลียด จนโดนผู้ตัดสินชูใบแดงไล่ออกจากสนาม

แก้แบบดิบๆ  Lips Sealed
บันทึกการเข้า

อย่าเชื่อผมมาก ผมมันมั่ว.....ฮ่าๆ

ฝาก Like แฟนเพจหน่อยครับ
https://www.facebook.com/devsignup

ข่าวสารวงการเกมส์ ทริปทริคต่างๆ เกมส์แจกฟรี
https://www.wecanplay.in.th/
BakKheab
สมุนแก๊งเสียว
*

พลังน้ำใจ: 65
ออฟไลน์ ออฟไลน์

กระทู้: 725



ดูรายละเอียด
« ตอบ #2 เมื่อ: 13 มีนาคม 2017, 02:58:06 »

เขียนโค้ดแบบ inline แบบนั้น เวลา spoil เยอะๆ โค้ดไม่รกเหรอครับ
เขียนแยกออกมาจะไม่ดูดีกว่าเหรอครับ

ตัวอย่าง (with jquery นะครับ)
http://codepen.io/bakkieab/pen/pePBLr
บันทึกการเข้า
hackz
Newbie
*

พลังน้ำใจ: 10
ออฟไลน์ ออฟไลน์

กระทู้: 73



ดูรายละเอียด
« ตอบ #3 เมื่อ: 13 มีนาคม 2017, 06:41:43 »

โค๊ด:
สำนักข่าวต่างประเทศรายงาน <div class="spoil" style="display: inline;">
<div style="display: inline;">
<span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {&nbsp;&nbsp;this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<a href=\'javascript:void(0);\' onClick=\'return false;\' style=\'color: #FF0000;\'>ซ่อนข้อความ</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<a href=\'javascript:void(0);\' onClick=\'return false;\' style=\'color: #FF0000;\'>ดูข้อความ</a>'; }" />
<a href="javascript:void(0);" onClick="return false;" style="color: #FF0000;">ดูข้อความ</a>
</span>
</div>
<div>
<div style="border: dashed 1px #000000;display: none;">วันที่ 12 มี.ค. ว่า ฉิน เช็ง กองกลางหัวร้อนของทีม เซี่ยงไฮ้ เสิ่นหัว ก่อวีรกรรมสุดน่าเกลียดในเกมลีกนัดล่าสุด เมื่อจงใจย่ำเท้าของ
</div>
</div>
</div>
 อักเซล วิตเซล อย่างสุดน่าเกลียด จนโดนผู้ตัดสินชูใบแดงไล่ออกจากสนาม

แก้แบบดิบๆ  Lips Sealed
เติม css inline เข้าไปแค่นั้นเหรอคะ โอ้ เพิ่งทราบเลย ขอบคุณมากๆ ค่ะ จุดใต้ตำตอจริงๆเลย



เขียนโค้ดแบบ inline แบบนั้น เวลา spoil เยอะๆ โค้ดไม่รกเหรอครับ
เขียนแยกออกมาจะไม่ดูดีกว่าเหรอครับ

ตัวอย่าง (with jquery นะครับ)
http://codepen.io/bakkieab/pen/pePBLr
ขอบคุณสำหรับคำแนะนำมากค่ะ ที่เราตั้งกระทู้วิธีการวิธีการแก้ไขดังกล่าว เราพยายามหนีจากการใช้งาน เจคิวรีให้มากที่สุด เราพยายามไม่อยากพึ่งมาก เพราะเวลาทำแท็กสปอยด์ เราไม่อยากแก้ไขตัวระบบมากค่ะ

อย่างไรก็ตามแต่ ต้องขอขอบคุณมากๆ เลยนะคะ สำหรับคำแนะนำ เป็นไปได้ เราจะลองนำวิธีการของท่านไปใช้งานดูค่ะ
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์