Ẩn/hiển thị tùy chọn nâng cao bằng cách sử dụng JavaScript

Tôi đang tạo biểu mẫu HTML và tôi muốn một số trường nằm trong "Tùy chọn nâng cao". Tôi muốn tạo liên kết "Tùy chọn nâng cao", có thể có dấu "cộng", để khi người dùng nhấp vào liên kết hoặc biển báo, những trường nâng cao này sẽ hiển thị. Làm thế nào tôi có thể làm điều này trong JavaScript? Tôi đã thử tìm kiếm nội dung như "Ẩn/hiển thị tùy chọn nâng cao" trên Google nhưng không thể tìm thấy giải pháp.Ẩn/hiển thị tùy chọn nâng cao bằng cách sử dụng JavaScript

<form ... /> 
    <label> 
     Title 
     <input id="title" name="title" size="40" type="text" value="" /> 
    </label> 
    <label> 
     Year 
     <input id="year" name="year" size="20" type="text" value="" /> 
    </label> 
    <label> 
     Year 
     <input id="comment" name="comment" size="40" type="text" value="" /> 
    </label> 
</form>

Ví dụ: tại đây tôi muốn trường "nhận xét" được nâng cao.

Nguồn

2013-05-27 Mika H.

bạn đã thử bất cứ điều gì chưa? –

@ExplosionPills Có, tôi đã thử tìm kiếm giải pháp. Tôi không chắc chắn chức năng JavaScript sẽ làm điều này. Bạn có thể đưa ra gợi ý không? –

sử dụng tên lớp CSS (hoặc thuộc tính kiểu) để ẩn các tùy chọn nâng cao của bạn. Sử dụng hàm JavaScript để xóa lớp (hoặc thuộc tính kiểu) khi nhấp vào liên kết "hiển thị tùy chọn nâng cao" của bạn. –

<a href='#' class='advanced'>Advanced Options</a> 

<div id='advancedOptions'><!-- Form stuff here --></div> 

<script type='text/javascript'> 
    $(document).ready(function() { 
     $('#advancedOptions').hide(); 
     $('.advanced').click(function() { 
      if ($('#advancedOptions').is(':hidden')) { 
       $('#advancedOptions').slideDown(); 
      } else { 
       $('#advancedOptions').slideUp(); 
      } 
     }); 
    }); 
</script>

Nó sẽ ẩn các yếu tố advancedOptions trên tải, khi bạn nhấp vào thẻ nó sẽ kiểm tra nếu advancedOptions ẩn, nếu nó là sau đó nó sẽ hiển thị nó nếu nó không được giấu nó sẽ ẩn nó. Bạn sẽ cần;

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

ở phía trên cùng của trang web mà bạn đang sử dụng, tôi biết đó là JQuery, nhưng nó sẽ có ích cho học JQuery để tham khảo trong tương lai

Nguồn

2013-05-27 19:21:51 user2406160

Điều này làm việc cho tôi nhưng trang sẽ tải lại mọi lúc và biểu mẫu của tôi sẽ mất dữ liệu đầu vào của nó. Để sửa lỗi này: tôi phải thay thế '$ ('. Advanced'). Click (function() {' with '$ ('. Advanced'). Click (function (e) {' và sau đó thêm dòng tiếp theo 'e .preventDefault(); ' – Daniel

Bạn đang tìm kiếm một cái gì đó như thế này (Pure JS) :

function more(obj) { 
    var content = document.getElementById("showMore"); 

    if (content.style.display == "none") { 
     content.style.display = ""; 
     obj.innerHTML = "-"; 
    } else { 
     content.style.display = "none"; 
     obj.innerHTML = "+"; 
    } 
}

Chức năng này kiểm tra mức độ hiển thị nội dung của bạn, nếu nó bị ẩn, hiển thị và ngược lại. Nó cũng thay đổi dấu cộng thành dấu trừ. Dưới đây là HTML sửa đổi:

<a href="#" onclick="more(this);">+</a> 
<br> 
<label id="showMore" style="display: none;"> 
    Year 
    <input id="comment" name="comment" size="40" type="text" value="" /> 
</label>

Và một bản demo: http://jsfiddle.net/uSqcg/

Nguồn

2013-05-27 19:26:59 tymeJV

tạo ra một phần tử div, tạo ra một quy tắc css để có nó ẩn theo mặc định, trên phần tử div của bạn thêm onmouseover và onmouseout sự kiện, và có chức năng sau liên quan đến những:

function showSomething(textToShow, container) { 
    var yourElement = $('#yourDivElement'); 
    yourElement.removeClass('hidden'); 

    var w = container.getClientRects()[0].width; 
    var h = container.getClientRects()[0].height; 
    var t = container.getClientRects()[0].top; 
    var l = container.getClientRects()[0].left; 

    var st = document.documentElement.scrollTop; 
    var sl = document.documentElement.scrollLeft; 

    if (st == 0 && document.body.scrollTop > st) 
     st = document.body.scrollTop; 

    if (sl == 0 && document.body.scrollLeft > sl) 
     sl = document.body.scrollLeft; 

    yourElement.css('top', t + st + h/3 * 2); 
    yourElement.css('left', l + sl + w/3 * 2); 

    yourElement.html(textToShow); 

    var lines = textToShow.length/20; 
    yourElement.css('height', 20 + lines * 10); 
} 

function hideSomething() { 
    $('#yourDivElement').addClass('hidden'); 
}

chỉ trong trường hợp (một quy tắc css để ẩn)

.hidden { 
    display: none; 
}

và ... chỉ trong trường hợp

<div onmouseover="showSomething('show this', this);" onmouseout="hideSomething();" class="hidden"></div>

này sẽ xác định vị trí hộp thoại nổi (một cái gì đó giống như một alt) liên quan đến đối tượng phụ huynh của div của bạn (Người có chứa phần tử div của bạn) ...

đơn giản;)

Nguồn

2013-05-27 19:32:57 OscarG

Hãy thử mã này, đây là demo

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('.advanced').click(function() 
     { 
     $('#hide').toggleClass("hidden"); 
     }); 
    }); 
</script> 
<style> 
.hidden 
{ 
    display:none; 
} 
</style> 
</head> 
<body> 
     <form > 
     <label> 
      Title 
      <input id="title" name="title" size="40" type="text" value="" /> 
     </label><br/> 
     <label> 
      Year 
      <input id="year" name="year" size="20" type="text" value="" /> 
     </label><br/> 
     <label class="advanced"> 
      + 
     </label><br/> 
     <label id="hide" class="hidden"> 
      Year 
      <input id="comment" name="comment" size="40" type="text" value="" /> 
     </label> 
    </form> 
</body> 
</html>

Nguồn

2013-05-27 19:43:48

Ẩn/hiển thị tùy chọn nâng cao bằng cách sử dụng JavaScript

Trả lời

Các vấn đề liên quan